1. responsive
이번엔 화면에 크기에 따라 효과가 적용되는 mix을 만들어볼려고 한다. responsive mix은 @content 함수를 통해 함수 내용을 styles.scss에서 설정할 수 있다. 그럼 먼저 html 을 만들어주자. 화면 크기에 따라 HELLO의 색깔이 바뀔것이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/css/reset.css" />
<link rel="stylesheet" href="dist/css/styles.css" />
<title>(S)CSS Masterclass</title>
</head>
<body>
<h1>Hell3o</h1>
</body>
</html>
그리고 mixins.scss 파일을 만들어주자. 그리고 안에 변수를 설정하고 media query로 화면의 최소, 최대 크기를 설정한다. 그리고 @content를 적어준다. 말 그대로 media query의 효과는 함수가 적용될 때 외부에서 설정한 값에 따라 유연하게 반응한다는 것이다. 말로는 잘 이해가 가지 않는다. 다음 코드를 통해 더 자세히 살펴보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$minIphone: 400px;
$maxIphone: 700px;
$minTablet: 900px;
$maxTablet: 1100px;
@mixin responsive($device) {
@if $device == "iphone" {
@media screen and (max-width: $maxIphone) and (min-width: $minIphone) {
@content;
// 즉 최소넓이가 400px 그리고 최대 700ox 일때 효과가 발동되는 데
// 그 효과는 styles.scss 에 적어준대로다.(@content때문에 가능한 기능이다.)
}
} @else if $device == "tablet" {
@media screen and (max-width: $maxTablet) and (min-width: $minTablet) {
@content;
}
}
}
아래 처럼 mix 를 import 하고 @include 를 이용해 마찬가지로 함수를 호출한다. 그리고 인자를 넣어주고 적용될 효과를 적어준다. 이때 지정한 효과가 @content가 되는 것이다.
1
2
3
4
5
6
7
8
9
10
11
@import "_mixins";
h1 {
@include responsive("iphone") {
color: yellowgreen;
}
@include responsive("tablet") {
color: peru;
}
}
// responsive 함수안에 있는 @content 때문에 h1 태그에 적는 족족 responsive와 연동되어 함께 효과가 나타난다.