SCSS 데이터 종류

SCSS에도 데이터 종류가 있다

$number: 1;  //.5, 100px, 1em
$string: bold;  //relative, "../images/a.png"
$color: red;   //blue, #FFF00, rgba(0,0,0,.1)
$boolean: true;  //false
$null: null;
$list: orange, royalblue, yellow;
    //list데이터 : js의 배열데이터와 유사하다
$map: (
    o:orange,
    r:royalblue,
    y:yellow
);
    //map데이터: js의 객체데이터와 비슷하다. 괄호는 소괄호를 사용한다.
.box{
    width:100px;
    color:red;
    position: relative;
}

다른 데이터 종류와 다르게 색상데이터가 있다.

 

red나 blue처럼 작성하면 색상이 나오는것도 string데이터가 아닌 color데이터이다.

 

 

 

list데이터 활용예시

$list: orange, royalblue, yellow;

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

 

map데이터 활용예시

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

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