[SassㆍSCSS] SASS 문법 5편 - @each, @while

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 @each, @while 에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

@each

 

@each 는 List 와 Map 데이터를 반복할 때 사용합니다.

자바스크립트 for in 반복문과 비슷합니다.

 

 

List

하나의 데이터를 저장하기 위해 변수를 사용하는데, 여러 개의 데이터를 저장할 때에는 list  또는 뒤이어 설명할  map 이라는 형식으로 저장합니다.

예를 들어 'apple, banana, mango, orange' 총 4개의 과일을 변수에 저장해서 사용하려고 할 경우,

단순하게 각각의 변수에 저장할 수 있겠지만, 아래 예제와 같이 데이터들을 연관된 것끼리 모아서 하나의 변수에 저장함으로써 편하게 관리할 수 있습니다.

// @each 문법에 하나의 변수만 사용할 때 문법
@each $변수 in 리스트 또는 맵 데이터 {
	//반복 내용
}

 

SASS '@each list data 반복문' 문법 코드 입니다.

//List Data $fruits : (apple, banana, mango, orange); .list_fruits { @each $fruit in $fruits { li.#{$fruit} { background: url('../img/#{fruit}.png'); } } }

 

CSS '@each list data 반복' 컴파일 결과 코드 입니다.

.list_fruits li.apple { background: url("../img/fruit.png"); } .list_fruits li.banana { background: url("../img/fruit.png"); } .list_fruits li.mango { background: url("../img/fruit.png"); } .list_fruits li.orange { background: url("../img/fruit.png"); }

 

SASS '@each 반복문에 두 개 이상의 변수 사용' 문법 코드 입니다.

.list-fruits { @each $fruit in apple, banana, mango, orange { li.#{$fruit} { background: url('../img/#{fruit}.png'); } } } //리스트를 변수로 저장해서 사용 가능 $fruits : apple, banana, mango, orange; .list_fruits { @each $fruit in $fruits { li.#{$fruit} { background: url('../img/#{fruit}.png'); } } }

 

CSS '@each 반복문에 두 개 이상의 변수 사용' 컴파일 결과 코드 입니다.

.list-fruits li.apple { background: url("../img/fruit.png"); } .list-fruits li.banana { background: url("../img/fruit.png"); } .list-fruits li.mango { background: url("../img/fruit.png"); } .list-fruits li.orange { background: url("../img/fruit.png"); } .list_fruits li.apple { background: url("../img/fruit.png"); } .list_fruits li.banana { background: url("../img/fruit.png"); } .list_fruits li.mango { background: url("../img/fruit.png"); } .list_fruits li.orange { background: url("../img/fruit.png"); }

 

SASS '@each index 값이 필요할 경우 내장 함수' 문법 코드 입니다.

//List Data $fruits : (apple, banana, mango, orange); .list_fruits { @each $fruit in $fruits { $i : index($fruits, $fruit); li:nth-child(#{$i}) { left: 100px * $i; } } }

 

CSS '@each index 값이 필요할 경우 내장 함수' 컴파일 결과 코드 입니다.

.list_fruits li:nth-child(1) { left: 100px; } .list_fruits li:nth-child(2) { left: 200px; } .list_fruits li:nth-child(3) { left: 300px; } .list_fruits li:nth-child(4) { left: 400px; }

 

 

Map

사용목적과 방법은 list와 유사합니다.

특징은 각 값마다 매칭 된 키가 있기 때문에 동적으로 접근할 수 있습니다.

또한 CSS에 없는 Sass의 고유 문법이며, 많은 양의 데이터를 컨트롤하기 위해서 반드시 필요합니다.

 

SASS '@each Map Data' 문법 코드 입니다.

// Map Data $coffees : (mild: americano, soft: latte, strong: espresso, sweet: mocha); @each $state, $menu in $coffees { #{$state}-icon { background: url('../img/#{$menu}.png'); } }

 

CSS '@each Map Data' 컴파일 결과 코드 입니다.

mild-icon { background: url("../img/americano.png"); } soft-icon { background: url("../img/latte.png"); } strong-icon { background: url("../img/espresso.png"); } sweet-icon { background: url("../img/mocha.png"); }

 

 

 

 

 

@while

 

@while 은 조건이 false 를 반환할 때까지 내용을 반복합니다.

자바스크립트 while 문과 유사하여, 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.

그렇기에 사용을 권장하지 않습니다.

@while 조건 {
	//반복 내용
}

 

SASS '@while' 문법 코드 입니다.

$i : 6; @while $i > 0 { .list-#{$i} { width: 2px * $i; } $i : $i - 2; }

 

CSS '@while' 컴파일 결과 코드 입니다.

.list-6 { width: 12px; } .list-4 { width: 8px; } .list-2 { width: 4px; }

 

 

 

 

 

마치며...

 

드디어 SassScript 마무리로 @each, @while 에 대하여 포스팅하였습니다.

@each, @while 문법도 자바스크립트 each문과 while문과 비슷하기에 이해하기 어렵지는 않았을 것입니다.

그동안 SassScript 인 if함수, @if, @for, @each, @while 다루어 보았습니다.

웹퍼블리싱 작업 시 상황에 맞게 효율적으로 쓰게 된다면 아주 유용한 문법들입니다.

다음은 Sass  @mixin과 @extend에 대하여 알아보겠습니다.

감사합니다.