SASS - 변수 및 제어문

sass는 기존 CSS에는 없는 변수와 각종 제어문 등이 있어 이를 통해 지정할 수 있다. 다만 이 제어문들은 실행환경(런타임)에서는 작동하지 않는걸 인지하고 있어야 한다.

1. 변수

1 2 3 4

a { $textColor: orange; .photo-#{$textColor} { color: red;} color: $textColor; /* a .photo-orange{color:red}; a {color:orange}로 컴파일 */ }

2. if문

1 2 3 4 5 6 7 8 9

a { $test-variable: true; @if ($test-variable) { display: block; } @else { display: none; } /* a {display:block}로 컴파일*/ }

3. for문

1 2 3 4 5 6 7 8 9

@for $i from 1 through 3 { // for(var i = 1; i =< 3; i++ ) .foo-#{$i} { width: 10px * $i; } } // CSS 결과 .foo-1 { width: 10px; } .foo-2 { width: 20px; } .foo-3 { width: 30px; }

4. each문

1 2 3 4 5 6

$authors: "apple", "banana", "melon"; @each $author in $authors { .photo-#{$author} { background: image-url("avatars/#{$author}.png") no-repeat } }

5. map (each를 변형해서 쓴다)

1 2 3 4 5 6 7 8 9 10 11 12

$color-array:( black: #4e4e4e, blue: #0099cc, green: #2ebc78 ); /* 딕셔너리 배열 */ @each $color-name, $color-value in $color-array { /* .bg-black */ .bg-#{$color-name} { background: $color-value; /* background: #4e4e4e */ } }