변수 (variables)
반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이름 앞에는 항상 $가 붙는다.
$변수이름 : 속성값;
ex)
$color - primary : #e96900;
$url-images : */assets /images/*
$w : 200px;
.box{
width : $w;
margin-left: $w;
background : $color-primary url($url-images + "bg.jpg")
}
변수 유효범위(variable Scope)
변수는 사용 가능한 유효범위가 있습니다.
선언된 블록 {} 내에서만 유효범위를 가집니다.
변수 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 사용할 수 없습니다.
ex)
.box1{
$color : #111;
background : $color;
}
변수 재 할당(variable reassignment)
$red : #ff0000;
$blue : #0000ff;
$color-primary : $blue;
$color-danger : $red;
.box{
color: $color-primary;
background : $color-danger;
}
!global(전역설정)
!global 플래그를 사용하면 변수의 유효범위를 전역(global)로 설정할 수 있음
$color : #000;
.box1{
$color : #111 !global;
background : $color;
}
.box2{
background : $color;
}
.box3{
$color : #222;
background : $color;
}
compiled to :
.box1{
background : #111;
}
.box2{
background : #111;
}
.box3{
background : #222;
}
!default (초깃값 설정)
$color-primary: red; .box { $color-primary: blue !default; background: $color-primary; }
Compiled to:
.box { background: red; }
좀 더 유용하게, ‘변수와 값을 설정하겠지만,
혹시 기존 변수가 있을 경우는 현재 설정하는 변수의 값은 사용하지 않겠다’는 의미로 쓸 수 있습니다.
예를 들어, Bootstrap 같은 외부 Sass(SCSS) 라이브러리를 연결했더니 변수 이름이 같아 내가 작성한 코드의 변수들이 Overwrite(덮어쓰기) 된다면 문제가 있겠죠.
반대로 내가 만든 Sass(SCSS) 라이브러리가 다른 사용자 코드의 변수들을 Overwrite 한다면,
사용자들은 그 라이브러리를 더 이상 사용하지 않을 것입니다.
이럴 때 Sass(SCSS) 라이브러리(혹은 새롭게 만든 모듈)에서 사용하는 변수에 !default 플래그가 있다면 기존 코드(원본)를 Overwrite 하지 않고도 사용할 수 있습니다.
#{}(문자보관)
#{} 를 이용해서 코드의 어디든지 변수 값을 넣을 수 있습니다.
$family : unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
댓글