[Sass 문법 정리] 7. @if, @for, @each, @while 문

4.10. @if – if문

일반적인 프로그래밍 if문과 같습니다.

// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}
// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}
// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

 

4.11.@for – for문

Sass의 for문은 Python의 for문과 유사합니다.

@for사용법

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}
// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}
// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

 

4.12. @each

List와 Map을 반복할 때 사용하며 일반 프로그래밍의 foreach와 비슷하다.

@each 사용법

@each $변수 in 데이터 {
  // 반복 내용
}

SCSS예제

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

키 값이 있는 map을 @each로 핸들링 할 경우

@each $key변수, $value변수 in 데이터 {
  // 반복 내용
}

$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);
@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

 

4.13. @while – while문

프로그래밍의 while문과 동일합니다. @while이 조건이 false가 될 때 까지 반복합니다.

@while사용법

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

 

SCSS예제

$i: 6;

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