[SCSS] SCSS 데이터 종류, @each, @content

1. SCSS 데이터 종류

// scss

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

/* css */

.box {
  width: 100px;
  color: red;
}

2. 반복문 @each

// scss

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

@each $c in $list {
  .box1{
    color: $c;
  }
}

@each $key, $value in $map {
  .box2-#{$k} {
    color: $v;
  }
}

/* css */

.box1 {
  color: orange;
}
.box1 {
  color: royalblue;
}
.box1 {
  color: yellow;
}
.box2-o {
  color: orange;
}
.box2-r {
  color: royalblue;
}
.box2-y {
  color: yellow;
}

3. 재활용 @content

// 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 */

.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;  
}