[SCSS] 조건과 반복

 

 

if(조건문, 참, 거짓)

$height: 150vh;

div{
  height: if($height > 100vh, $height, null);
}

if 함수를 이용해 조건문이 참이면 첫번째 표현식을, 거짓이면 두 번째 표현식을 반환한다.

 

 

@if, @else, @else if 지시어

@if, @else, @else if 지시어는 JS에서 if-else문과 비슷한 구조이다.

 

@if(조건식1){
  조건식1이 참일때 실행할 코드
} @else if(조건식2){
  조건식2가 참일때 실행할 코드
} @else{
  앞선 조건식이 모두 거짓일때 실행할 코드
}

 

$height: 150vh;

div{
  height: $height;
  @if($height > 200vh){
    background: yellow;
  } @else if($height > 100vh){
    background: red;
  } @else{
    background: blue;
  }
}

 

 

@for

@for은 JS에서 for 반복문과 비슷한 구조이다.

스타일이나 값을 일정 횟수 반복하여 사용하거나 값을 일정하게 변화할 때 사용할 수 있다.

@for $변수이름 from 시작 through 종료{
  ...
};

@for $변수이름 from 시작 to 종료{
  ...
};

 

 

< from ~ through >

from 시작 부터 throught 종료 조건까지 반복해야 할 때 사용한다.

 

from a through b: a 부터 b까지 반복 = b를 포함

 

 

< from ~ to >

from 시작 부터 to 종료 조건 직전까지 반복해야 할 때 사용한다.

 

from a to b: a부터 b직전까지 반복 = b포함하지 않음

 

 

 

@each

 

List나 Map 데이터를 반복할 때 사용한다.

JS의 for-in문이나 for-of문과 비슷하다.

 

@each $변수 in 데이터{
  ...
}

$colors: (red, orange, yellow, green, blue);

.div{
  @each $color in $colors{
    li.#{$color}{
      background: url("/img/#{$color}.png");
    }
  }
}