SASS, SCSS 변수(variables) - scope, !global, !default

sass에서 변수를 사용할 수 있는데  $  표시를 앞에 붙이면 변수를 선언할 수 있습니다.

반복적으로 사용되는 값을 변수로 지정하여 사용하면 반복을 줄이고, 복잡한 계산도 가능하며 라이브러리 구성 등의 작업이 가능합니다.

즉 유지보수를 쉽게 만들어줍니다.

 

값이 여러번 반복되면 미리 변수로 만듭니다. 값을 기억하지 않고 변수명만을 가지고 스타일 가능합니다.

예를 들면  #272d4f  라는 컬러값은 기억하지 어렵지만  $blue : #272d4f  라고 선언하면 $blue만 기억하면 되므로 사용하기 쉽습니다.

 

sass에서의 변수는  $  를 사용하고 css규칙과 똑같이 정의하면 됩니다.

반복되는 값을 미리 변수로 정의하면 스타일링하기에 편합니다.

/* use */
$변수이름 : 속성값;

/* scss */
$base-color: #272d4f;
$border-line: rgba($base-color, 0.88);

.box {
  border: 1px solid $border-line;
}


/* css - Compiled to */
.box {
    border:1px solid rgba(39,45,79,0.7)
}

 

변수의 유효범위 (Scope)

sass에서 변수의 범위가 있으며, 전역변수와 지역변수 두 가지로 나뉩니다.

변수에 변수를 할당할수 있으며, !default 를 사용하여 변수의 초기값을 설정할 수 있습니다.

 

전역변수

document 최상위에서 작성한 변수는 전역변수입니다. 전역변수는 어디서나 사용할 수 있습니다.

/* scss */
$url-path: '../images/';   // 전역변수
$line-default: 1.5;    // 전역변수
$blue-color: #2e4dff; // 전역변수

.box {
    background: url($url-path + 'icon.png') no-repeat;
    color: $blue-color;
}
.box2 {
    color: $blue-color;
    line-height: $line-default;
}


/* css - Compiled to */
.box{
    background:url("../images/icon.png") no-repeat;
    color:#2e4dff
}
.box2{
    color:#2e4dff;
    line-height:1.5
}

 

지역변수

지역변수는 document 최상위가 아닌 class나 ID가 선언된 자기자신을 감싸고 있는 중괄호 { } 안에서 사용됩니다.

지역변수는 상위 부모 블록에서는 사용할 수 없습니다. 

지역변수에  !global  을 사용하면 전역 변수로 사용할 수 있습니다.

/* scss */
.box {
    $url-path: '../images/';   // 지역변수
    $line-default: 1.5;    //지역변수
    $blue-color: #2e4dff !global; // !global 전역변수
    
    font-size: 16px;
    line-height: $line-default;
    p {
        line-height: $line-default;
        color: $blue-color;
    }
}
.box2 {
    line-height: $line-default;    //error (box에 선언된 지역변수 이므로 error)
    color: $blue-color;
}


/* css - Compiled to */
.box{
    font-size:16px;
    line-height:1.5
}
.box p {
    line-height:1.5;
    color:#2e4dff
}
.box2{
    line-height:#D2D4E5;
    color:#2e4dff
}

 

변수 재 할당

변수에 변수를 할당해줄 수 있습니다.

/* scss */
$width: 360px;
$box-width: $width;

.box {
    width: $box-width;
}


/* css - Compiled to */
.box {
    width: 360px;
}

 

!default (변수값 초기화 설정)

!default 를 사용하면 기존에 선언한 변수와 재할당된 변수가 있을 경우 기존 선언한 변수의 할당 값을 사용한다는 플래그입니다.

/* scss */
$color-primary: yello;    // 변수 선언
.box {
    $color-primary: red !default;  // 변수 재할당
    color: $color-primary;
}

/* css - Compiled to */
.box {
    color: yello;   // 기존 초기값 할당됨.
}

 

 

#{ } (변수 문자 보간)

 # { } 를 사용하면 변수값을 문자열로 넣을 수 있습니다.

/* scss */
$pdt4: 4;
$pdt8: 8;
$container: container;

.item-#{$container} {   // 문자보간
    font-size : 16px  
}
span {
    padding-top: #{$pdt4}#{$pdt8}px;    //문자열로 변환되어 48로 값이 나옴
}

div {
    padding-top: $pdt4 + $pdt8 + px;   //숫자값이 연산되어 12로 값이 나옴
}


/* css - Compiled to */
.item-container{font-size:16px}
span {padding-top:48px}
div {padding-top:12px}