@for, @each

@for

@for 변수 from start to end 의 형태로 작성하며, to 대신 through 를 작성할 수 있습니다.
to 는 해당 end 미만으로 반복, through 는 해당 end 이하로 반복합니다.

scss

@for $i from 1 to 6 {
  .ic#{ $i } {
    border: 1px solid red;
  }
}

@for $i from 1 through 5 {
  .ict#{ $i } {
    border: 1px solid blue;
  }
}

css

.ic1 { border: 1px solid red; }

.ic2 { border: 1px solid red; }

.ic3 { border: 1px solid red; }

.ic4 { border: 1px solid red; }

.ic5 { border: 1px solid red; }

.ict1 { border: 1px solid blue; }

.ict2 { border: 1px solid blue; }

.ict3 { border: 1px solid blue; }

.ict4 { border: 1px solid blue; }

.ict5 { border: 1px solid blue; }

@each

list, map 을 반복할 때 사용합니다.

list: $colors: red, blue, pink, black, yellow;
map : $fontColor: ( h1: red, h2: blue, h3: green );

scss

$colors: red, blue, pink, black, yellow;

@each $var in $colors {
  .ic#{ $var } {
    border: 1px solid $var;
  }
}

@each $var in $colors {
  .ict#{ $var } {
    border: 1px solid $var;
  }
}

$fontSize: (
  h1: 30px,
  h2: 20px,
  h3: 15px
);

@each $el, $fs in $fontSize {
  #{ $el } {
    font-size: #{ $fs };
  }
}

$fontColor: (
  h1: red,
  h2: blue,
  h3: green
);

@each $el, $color in $fontColor {
  #{ $el } {
    color: #{ $color };
  }
}

css

.icred { border: 1px solid red; }

.icblue { border: 1px solid blue; }

.icpink { border: 1px solid pink; }

.icblack { border: 1px solid black; }

.icyellow { border: 1px solid yellow; }

.ictred { border: 1px solid red; }

.ictblue { border: 1px solid blue; }

.ictpink { border: 1px solid pink; }

.ictblack { border: 1px solid black; }

.ictyellow { border: 1px solid yellow; }

h1 { font-size: 30px; }

h2 { font-size: 20px; }

h3 { font-size: 15px; }

h1 { color: red; }

h2 { color: blue; }

h3 { color: green; }