SCSS - 데이터 종류

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

---

• 반복문 @each
  • List와 Map 데이터를 반복할 때 사용
  • for in 문과 유사

$list: orange, royalblue, yellow;
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

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

// CSS (Compiled to)
.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}

---

• 재활용 @content
  • 선언된 mixin에 @content가 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달
  • 기존 mixin에 가지고 있는 기능에 선택자나 속성 등을 추가

// SCSS
@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}

.container {
    width: 100px;
    height: 100px;
    @include left-top;
}
.box {
    width: 200px;
    height: 300px;
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

// CSS (Compiled to)
.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}