문법 - 변수, 유효범위, 재 할당, 전역 설정, 초기값 설정, 문자 보간

1. 변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이름 앞에는 항상 $를 붙인다.

$변수이름: 속성값;

$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;
  background: #e96900 url("/assets/images/bg.jpg");
}

 

 

2. 변수 유효범위(Variable Scope)

변수는 사용 가능한 유효범위가 있다. 선언된 블록({ }) 내에서만 유효범위를 가진다.

변수 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 사용할 수 없다.

.box1 {
  $color: #111;
  background: $color;
}
// Error
.box2 {
  background: $color;
}

 

 

 

3. 변수 재 할당(Variable Reassignment)

다음과 같이 변수에 변수를 할당할 수 있다.

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

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

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

.box {
  color: #0000FF;
  background: #FF0000;
}

 

 

 

4. !global (전역 설정)

!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다.

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

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

 

주의해야할점은,

$color: #000;
.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}
.box3 {
  $color: #222;
  background: $color;
}

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

대신 기존에 사용하던 같은 이름의 변수가 있을 경우 값이 덮어져 사용될 수 있다.

 

 

 

5. !default (초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.

즉, 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.

$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}

.box {
  background: red;
}

이 코드에서 보면 알 수 있듯이, blue라고 새로 할당을 했지만, !default를 사용하자, 변수가 기존할당값인 red를 사용한 걸 볼 수 있다.

 

실제로 예를들어, 부트스트랩에서 코드를 재공할때 !default를 소스코드에 많이 사용하는데, 사용자의 코드를 이 라이브러리가 덮어써버리면 안되기 때문이다.

 

 

 

6. #{} (문자 보간)

#{}를 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.

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

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

Sass의 내장 함수 unquote()는 문자에서 따옴표를 제거한다.