[Sass 특징] 변수

변수는 모든 프로그래밍 언어에서 정의되는 내용으로

반복되는 내용을 복사/붙여넣기로 사용하는 것이 아닌

 

임의의 값을 만들어 반복되는 내용을 담아 놓고 재사용 할 수 있게 해준다.

 

1. Sass에서의 변수

Sass 문법에서도 변수라는 개념이 존재한다.

변수 선언은 '$' 특수문자로 선언한다. (ex. $test : 0;)

 

Sass를 사용하면서 변수가 필요한 상황을 예를 들자면

 

특정 페이지에서 주로 사용되는 포인트 컬러값이 빨간색이라고 했을 때,

border-color, background-color, color의 값을 특정 영역별로

 

border-color : red;

background-color : red;

color : red

를 반복적으로 사용해야 할 것이다.

 

또한 이렇게 반복적으로 사용한 값이

디자인 개선 작업과 같이 포인트 컬러값을 변경하는 일이 생겼을 경우

 

각 영역을 일일이 찾아서 바꿔줘야 할 것이다.

 

이러한 번거로움을 개선하기 위해 Sass에서도 변수를 지원한다.

/* CSS */
.main{border:1px solid red; background-color:red;}
.main p{color:red;}
.main .box{background:red; color:red;}

/* SCSS */
$color : red;
.main{
   border:1px solid $color; background-color:$color;
   p{color:$color;}
   .box{background:$color; color:$color;}
}

위의 소스 같이 css로 변수선언 없이 작업을 하다보면

각 영역별 color값 red를 변경해야 하는 경우 일일이 찾아서

바꿔줘야하지만

 

아래 Sass(SCSS) 소스의 경우 $color의 값만 변경해주면

다른 영역들의 color 값을 손쉽게 동시에 변경할 수 있다.

 

2. 변수의 범위

Sass에서 변수의 범위는 크게 전역변수/지역변수로 나눌 수 있다.

 

전역변수는 말 그대로 Sass문법이 적힌 전체 영역에 해당하는 변수를 선언하는 것이고

지역변수는 특정 블럭 영역 안에 변수의 범위를 한정하여 선언하는 것이다.

 

/* 전역변수 선언 */
$color : red;

.test1{
   /* 지역변수 선언 */
   $size : 12px;
   
   color : $color;
   font-size : $size;
}

.test2{
   border-color : $color;
   
   /* 에러 출력 (선언된 $size 변수가 없음.) */
   font-size : $size;
}

위의 소스처럼 .test1의 영역 안에 $size라는 변수를 선언해서 사용을 하였는데

이 변수를 .test2에서는 가져와서 사용할 수 없다.

 

그렇기 때문에 위의 소스를 출력했을 때 에러가 출력된다.

 

3. 변수의 정의 (!default, !global)

Sass에서 변수를 정의할 때 !default, !global 플래그와 함께 작성할 수 있다.

 

!default의 경우,

기존에 정의된 변수의 값이 있을 경우 기존 변수의 값을 유지하고

새로 값을 따로 적용시키지 않는다.

/* 변수 선언 */
$color : red;
$color : blue !default;

.test1{
   /* color : red 출력 */
   color : $color;
}

위의 경우와 같이 $color 변수가 이미 red 값으로 선언이 되어있었기 때문에

$color: blue에 !default 선언한 경우 선언한 변수의 값이 무시되어 color:red 값이 결국 출력이 되었다.

 

반면에

기존 변수에 'null' 값이 들어가 있었을 경우

!default 를 사용하면 해당 변수값이 적용된다.

/* 변수 선언 */
$color : null;
$color : blue !default;

.test1{
   /* color : blue 출력 */
   color : $color;
}

 

 

!global의 경우,

2번 변수의 범위에서 말했듯 변수에는 지역변수/전역변수의 개념이 존재하는데

지역변수 영역에 선언한 변수를 전역변수로 사용할 수 있도록 만든다.

/* 전역변수 선언 */
$color : red;

.test1{
   /* 지역변수 선언 & !global 사용으로 전역변수화 */
   $size : 12px !global;
   
   color : $color;  // color: red;
   font-size : $size;  // font-size: 12px;
}

.test2{
   border-color : $color;  // color: red;
   font-size : $size;  // font-size: 12px;
}