SCSS

SCSS는 CSS의 preprocessor이다.

이런류의 preprocessor는 stylus, less와 같은것들이 있는데,
이런것들은 컴파일되면 일반적인 CSS가 된다.

SCSS는 CSS를 programming language처럼 만들어준다
$bg: #e7473c;
$title: 32px;

달러표시로 변수를 선언할 수 있다.

@import “_variables”; // import

h2 {
color: $bg;
}

.box { // nesting
margin-top: 20px;
&:hover {
background-color: green;
}
h2 {
color: blue;
&:hover {
color: red;
}
}
button {
color: red;
}
}

특히 유용한 것인데, nesting을 통해 위를 예처럼 박스안의 h2한톄만 효과를 적용한다던지 할 수도 있다,
이런것을 통해 classname 지옥에서 조금 해방될 수 있다.

이번엔 mixin에 대해 알아보면,
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}

이런식으로 여러줄의 css를 하나로 정의할 수 있다.
물론 파라메터도 받을 수 있고,

@import “_mixins”;

a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link(red);
}
button {
color: red;
&:nth-child(even) {
@include link(blue);
}
}

그리고 그것을 이런식으로 인클루드를 통해 사용할 수 있다.

@mixin link($text) {
text-decoration: none;
display: block;
@if $text == “odd” {
color: blue;
} @else {
color: red;
}
}

그리고 심지어는 이렇게 if문도 쓸 수 있다

%button {
font-family: inherit;
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
color: white;
font-weight: 500;
}

다음은 extents이다.
퍼센트 표시로 저렇게 세트를 만들어놓고,
@import “_buttons”;

a {
@extend %button;
text-decoration: none;
}

button {
@extend %button;
border: none;
}

이렇게 확장해서 쓸 수 있다.

mixin에 content를 이용해서 아래처럼 단말크기에 따른 반응형 웹을 만들수도 있다.
$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;

@mixin responsive($device) {
@if $device == “iphone” {
@media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
@content;
}
} @else if $device == “tablet” {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
@content;
}
} @else if $device == “iphone-l” {
@media screen and (max-width: $minIphone) and (max-width: $maxIphone) and (orientation: landscape) {
@content;
}
} @else if $device == “ipad-l” {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) and (orientation: landscape) {
@content;
}
}
}

@import “_mixins”;

h1 {
color: red;
@include responsive(“iphone”) {
color: yellow; // @content가 될것이다
}
@include responsive(“iphone-l”) {
font-size: 60px; // @content가 될것이다
}
@include responsive(“tablet”) {
color: green; // @content가 될것이다
}
}