[SCSS] 데이터 종류, @each

SCSS

$number: 1;      // .5, 100px, 1rem
$string: bold;   // relative, "../image/a.png"
$color: red;     // blue, #ffff00, rgba(0,0,0,.1) 
$boolean: true;  // false
$null: null;
$list: orange, royalblue;
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

@each $c in $list {
    .list {
        color: $c;
    }
}
@each $k, $v in $map {
    .box-#{$k} {
        color: $v;
    }
}

컴파일된 CSS

.list {
  color: orange;
}

.list {
  color: royalblue;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

좋은 웹페이지 즐겨찾기