scss 변수와 문자보간

scss는 변수를 사용하여 속성들을 정의할 수 있으며
문자 보간을 통하여 값을 저장할 수 있다.

1. 사용법

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
	width: $w;
    margin-left: $w;
    background: $color-primary url($url-images + "bg.jpg");
}

위 코드를 컴파일 해보면 다음과 같이 나온다.

.box {
	width: 200px;
	margin-left: 200px;
    backgroud: #e96900 url("/assets/images/bg.jpg");
}

2. 변수 재할당

$red: #FF0000;
$blue: #000FF;

$color-primary: $blue;
$color-danger: $red;

.box {
	color: $color-primary;
    background: $color-danger;
}

3. 변수유효범위

.box1 {
	$color: #111;
    background: $color;
}

// Error
.box2 {
	background: $color;
}

4. !global (전역 설정)

.box1 {
	$color: #111; !global
    background: $color;
}

// Error
.box2 {
	background: $color;
}

 전역 설정을 하고 컴파일을 해보면 다음과 같이 나온다.
 

.box1 {
	background: #111;
}
.box2 {
	background: #111;
}

5. { } (문자 보간)

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

위의 import문을 보면 {$family}가 들어가 있는 것을 볼 수 있다.
문자 보간을 통해서 컴파일 해보면 다음과 같이 "Droid+sans"가
포함 되어서 나오게 된다.

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");