SCSS 데이터 종류

SCSS에도 JavaScript와 마찬가지로 데이터 종류가 있습니다. 구성과 명칭은 다소 다르지만, 아래의 예시를 보며 SCSS 내의 데이터 종류에 대해 간단히 알아봅시다.

1. Data Type

1.1 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;   // Array
$map: (                             // Object
    o: orange,
    r: royalblue,
    y: yellow
);
.box {
    width: 100px;
    color: red;
    position: relative;
}

1.2 CSS(Compiled)

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

2. 반복문 each

이번에는 JavaScript의 배열과 유사한 $list와 객체의 개념인 $map을 이용하여 SCSS에서 each 키워드를 통해 반복문을 구현해내는 방법을 알아봅시다.

2.1 SCSS

/* 배열 */
$list: orange, royalblue, yellow;

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

/* 객체 */
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

@each $k, $v in  $map {      // $k는 $key, $v는 $value의 줄임말
    .box-#{$k} {
        color: $v;
    }
}

2.2 CSS(Compiled)

/* 배열 */
.box {
  color: orange;
}

.box {
  color: royalblue;
}

.box {
  color: yellow;
}

/* 객체 */
.box-o {
  color: orange;
}

.box-r {
  color: royalblue;
}

.box-y {
  color: yellow;
}