seungwoo.dev

목차

[SCSS] 반복문(@for, @each)

avatar image
Seungwoo Kim

@each 문자열 배열

코드
html
<ul>
  <li>
    <div class="image image-10" data-image-id="10"></div>
  </li>
  <li>
    <div class="image" data-image-id="34"></div>
  </li>
  <li>
    <div class="image" data-image-id="40"></div>
  </li>
  <li>
    <div class="image" data-image-id="56"></div>
  </li>
</ul>
html
<ul>
  <li>
    <div class="image image-10" data-image-id="10"></div>
  </li>
  <li>
    <div class="image" data-image-id="34"></div>
  </li>
  <li>
    <div class="image" data-image-id="40"></div>
  </li>
  <li>
    <div class="image" data-image-id="56"></div>
  </li>
</ul>
scss
$image_ids: 10, 34, 40, 56;
 
.image {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  @each $id in $image_ids {
    &[data-image-id="#{$id}"] {
      background-image: url('https://picsum.photos/id/#{$id}/200/200');
    }
  }
 
  // 클래스 방식
  @each $id in $image_ids {
    &.image-#{$id} {
      background-image: url('https://picsum.photos/id/#{$id}/200/200');
    }
  }
}
scss
$image_ids: 10, 34, 40, 56;
 
.image {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  @each $id in $image_ids {
    &[data-image-id="#{$id}"] {
      background-image: url('https://picsum.photos/id/#{$id}/200/200');
    }
  }
 
  // 클래스 방식
  @each $id in $image_ids {
    &.image-#{$id} {
      background-image: url('https://picsum.photos/id/#{$id}/200/200');
    }
  }
}

@each, map 같이 사용하기

코드
html
<ul>
  <li class="state">default</li>
  <li class="state succeed">succeed</li>
  <li class="state error">error</li>
  <li class="state warning">warning</li>
  <li class="state disabled">disabled</li>
</ul>
html
<ul>
  <li class="state">default</li>
  <li class="state succeed">succeed</li>
  <li class="state error">error</li>
  <li class="state warning">warning</li>
  <li class="state disabled">disabled</li>
</ul>
scss
$state_colors: (
  // 'default': #0066cc,
  'succeed': #22aa3d,
  'error': #f52516,
  'warning': #fab520,
  'disabled': #acafb5,
);
 
ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
 
.state {
  padding: 5px 10px;
  border-radius: 4px;
  list-style-type: none;
  background-color: #0066cc;
  
  @each $name, $color in $state_colors {
    &.#{$name} {
      background-color: $color;
    }
  }
}
scss
$state_colors: (
  // 'default': #0066cc,
  'succeed': #22aa3d,
  'error': #f52516,
  'warning': #fab520,
  'disabled': #acafb5,
);
 
ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
 
.state {
  padding: 5px 10px;
  border-radius: 4px;
  list-style-type: none;
  background-color: #0066cc;
  
  @each $name, $color in $state_colors {
    &.#{$name} {
      background-color: $color;
    }
  }
}

@for 특정 횟수 만큼 반복하기(숫자 배열)

코드
html
<ul>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 1.0</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.8</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.6</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.4</span>
  </li>
</ul>
 
<ul>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 1.0</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.8</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.6</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.4</span>
  </li>
</ul>
html
<ul>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 1.0</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.8</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.6</span>
  </li>
  <li class="light">
    <div class="color"></div>
    <span>opacity: 0.4</span>
  </li>
</ul>
 
<ul>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 1.0</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.8</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.6</span>
  </li>
  <li class="dark">
    <div class="color"></div>
    <span>opacity: 0.4</span>
  </li>
</ul>
scss
.color {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 4px;
}
 
.light {
  .color {
    background-color: #1E4994;
  }
  
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      .color {
        opacity: 1 - ($i - 1) * 0.2;
      }
    }
  }
}
 
.dark {
  .color {
    background-color: #292E3B;
  }
  
  @for $i from 1 to 5 {
    &:nth-child(#{$i}) {
      .color {
        opacity: 1 - ($i - 1) * 0.2;
      }
    }
  }
}
scss
.color {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 4px;
}
 
.light {
  .color {
    background-color: #1E4994;
  }
  
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      .color {
        opacity: 1 - ($i - 1) * 0.2;
      }
    }
  }
}
 
.dark {
  .color {
    background-color: #292E3B;
  }
  
  @for $i from 1 to 5 {
    &:nth-child(#{$i}) {
      .color {
        opacity: 1 - ($i - 1) * 0.2;
      }
    }
  }
}
  • through는 마지막 종료 숫자 포함
  • to는 마지막 종료 숫자 포함하지 않음
  • nth-child 와 함께 사용하면 매우 유용함

참고