SCSS ch.1 SCSS (15) ~ (17)

15. 데이터 종류

SCSS 데이터 종류

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../main.css"
$color: red; // #FFF, rgba(1, 1, 1, 0.3)
$boolean: true; // false
$null: null;

자바스크립트의 배열과 유사한 list

$list: orange, red, blue;

자바스크립트의 객체와 유사한 map

$map: (
	0: orange,
    R: red,
)

16. 반복문 @each

list와 map을 사용할 때는 each를 사용해서 반복문을 만들 수 있음

• list

$list: orange, red, blue;

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

• map

$map: (
	0: orange,
    R: red,
)

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

17. 재활용 @content

@mixin left-top {
	position: absolute;
    top: 0;
    @content;
}

.box {
	width: 200px;
    @include left-top {
    	bottom: 0;
        right: 0;
    }
}