SCSS: SCSS Ep.6

데이터 종류

$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: royalblue, orange, yellow;
$map: (
  r: royalblue,
  o: orange,
  y: yellow
);

• 숫자 데이터

  단순한 숫자만이 아닌 px, em 등의 단위가 붙은 것들도 숫자 데이터에 포함된다.

• 문자 데이터

  bold, relative, “ 따옴표 ” 등이 문자 데이터이다.
  단, red나 blue같은 실제 css에서 적용되는 문자들은 문자 데이터가 아니다.

• 색상 데이터

  red, blue, #FFFF00, rgba(0,0,0,.1) 등 색상을 나타나게 하는 것들을 색상데이터라고 한다.

• boolean

  true, false 만이 boolean 데이터로, 참과 거짓을 말한다.

• null

  아무것도 의미하지 않는 빈 데이터를 말한다.

• list

  자바스크립트의 배열 데이터와 유사한 데이터이다.
  데이터들을 쉼표로 구분해서 순서대로 정렬한 것이 list이다.

• map

  자바스크립트의 객체 데이터와 유사하다.
  기본적으로 key, value 형태로 구성되어 있다.
  다른점은, 자바스크립트이 객체 데이터는 중괄호로 나타내는 반면에 map 데이터는 소괄호로 나타낸다.

반복문 @each

list와 map 데이터를 다루기 위해서 @each 키워드를 사용할 수 있다.
해당 키워드는 list와 map 데이터의 반복문을 만들어 낼 수 있다.

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

• list 데이터 @each 반복

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

  @each 키워드를 통해서 $list 변수안에 있는 데이터들을 반복적으로 c변수에 담아서 중괄호 안에서 처리한다는 의미이다.

  .box {
    color: royalblue;
  }
    
  .box {
    color: orange;
  }
    
  .box {
    color: yellow;
  }
  

• map 데이터 @each 반복

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

  list 데이터와 구조는 유사하다. 다른 점은 map 데이터는 변수 부분을 key, value 형태로 만들 수 있다는 것이다.

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

재활용 @content

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

@content의 역할

@mixin을 통해서 left-top을 재활용하고 있다.
box 클래스에서도 left-top을 재활용하고 있는데, 이때 중괄호를 열어서 추가로 코드를 작성해 주었다.
재활용 코드에 내용을 추가적으로 넣을 수 있도록 도와주는 것이 @content 키워드이다.

재활용하고 있는 코드 내부에 @content 키워드를 작성해주면 해당 코드를 재활용하고 있는 곳에서 중괄호를 열어 추가적으로 코드를 작성할 수 있게 해준다.

즉, 중괄호를 열어서 새롭게 작성한 코드가 @content 안으로 들어간 것이라고 보면 된다.

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