[SCSS] @each $key변수, $value변수 in { 실행문 }

SCSS 에서 button component 만들 때 사용한 것 정리!!

@each $key변수, $value변수 in 데이터 {
실행문
}

# 개발환경
vue.js / vuetify / scss

e.g.
// button.vue
<v-btn class=“c-button” color=“main—100”>button 100</v-btn>
<v-btn class=“c-button” color=“main—50”>button 50</v-btn>
<v-btn class=“c-button” color=“main—10”>button 10</v-btn>

// variable.scss
$main—100: rgb(12, 31, 41);
$main—50: rgb(14, 14, 31);
$main—10: rgb(143, 214, 31);
$main—: (
   ‘100’: $main—100,
   ‘50’: $main—50,
   ‘10’: $main—10
)

// buttons.scss
.v-btn {
   &.c-button {
     @each $name, $value in $main— {
       &.main—#{$name} {
         background-color: $value;
       }
     }
   }
}