[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)

SCSS 조건문

 

인라인 if

 

Sass

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

CSS

div {
  width: 555px;
}

 

@if

Sass

@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

div {
  width: limitSize(180px);
  height: limitSize(340px);
}

CSS

div {
  width: 200px;
  height: 800px;
}

---

SCSS 반복문

 

@for

@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다.
두 형식은 종료 조건이 해석되는 방식이 다릅니다.

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

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

to는 주어진 값 직전까지만 반복해야할 경우 유용할 수 있습니다.
그러나 :nth-child()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 사용하길 권장합니다.

 

Sass

/* 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
  }
}

CSS

.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }

.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }

 

리스트 순회

Sass

$color_list: (#4285f4, #ea4335, #fbbc05, #4285f4, #34a853, #ea4335);

@for $i from 1 through length($color_list) { /* 리스트 길이 만큼 순회 */
    span:nth-child(#{$i}) {
       color: nth($color_list, $i); /* $color_list[$i] 와 같은 격이다 */
    }
}

CSS

span:nth-child(1) {
  color: #4285f4;
}
span:nth-child(2) {
  color: #ea4335;
}
span:nth-child(3) {
  color: #fbbc05;
}
span:nth-child(4) {
  color: #4285f4;
}
span:nth-child(5) {
  color: #34a853;
}
span:nth-child(6) {
  color: #ea4335;
}

 

@each

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

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

 

Sass

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

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

CSS

.fruits li.apple {
  background: url("/images/apple.png");
}
.fruits li.orange {
  background: url("/images/orange.png");
}
.fruits li.banana {
  background: url("/images/banana.png");
}
.fruits li.mango {
  background: url("/images/mango.png");
}

 

인덱스 값

혹시 매번 반복마다 Index 값이 필요하다면,

다음과 같이 index() 내장 함수를 사용할 수 있습니다.

 

Sass

$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    $i: index($fruits, $fruit);
    li:nth-child(#{$i}) {
      left: 50px * $i;
    }
  }
}

CSS

.fruits li:nth-child(1) {
  left: 50px;
}
.fruits li:nth-child(2) {
  left: 100px;
}
.fruits li:nth-child(3) {
  left: 150px;
}
.fruits li:nth-child(4) {
  left: 200px;
}

 

여러개의 리스트

동시에 여러 개의 List 데이터를 반복 처리할 수도 있습니다.
단, 각 데이터의 Length가 같아야 합니다.

 

Sass

$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana { /* 자바스크립트의 구조분해와 유사하다 */
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

CSS

.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

 

Map

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

 

Sass

$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);

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

CSS

.box-apple {
  background: url("/images/korea.png");
}
.box-orange {
  background: url("/images/china.png");
}
.box-banana {
  background: url("/images/japan.png");
}

 

@while

@while은 조건이 false로 평가될 때까지 내용을 반복합니다.
while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.
사용을 권장하지 않습니다.

 

Sass

$i: 6;

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

CSS

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

---

Reference

https://heropy.blog/2018/01/31/sass/