SCSS - 데이터 타입

SCSS에서 사용하는 데이터 타입 모음

: number, string, color, boolean, null, list, map, .class

 

@each 문법을 이용해서 list, map안에 데이터를 꺼내서 사용할 수 있다.

 

$number: 1;

$string: bold;

$color: red;

$boolean: true;

$null: null;

// 자바스크립트에서 배열과 유사
$list: orange, royalblue, yellow;

// key, value 형태의 자바스크립트에서 객체데이터와 유사(object)
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

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

// list데이터를 반복적으로 수행
@each $c in $list {
    .box {
        color: $c;
    }
}

// map데이터를 반복적으로 수행
@each $k, $v in $map {
    .box-#{$k}{
        color: $v;
    }
}

확인