SCSS 문법 #2

함수

$i : 변수 데이터 사용

@for $i from 1 through 10 {
		.box: nth-child(#{$i}) {
			width: 100px * $i;
				}
			}

반복문

@function ratio($size, $ratio) {
		@return $size * ratio
}

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

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

색상 내장 함수

$color: royalblue;
.box {
	background-color: $color;
	&:hover {
		background-color: darken($color, 10%) }
					}
			}

saturate: 채도
grayscale : 회색도
invert : 색상 반전
rgba : 투명도 등 a값

데이터

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

Map & List

$k : key
$v : value

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

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