SCSS Custom Variables

SCSS와 변수

(1) SCSS 파일 내 변수 선언

SCSS 파일 내에서 변수를 선언할 때는 스타일 안에서「$」를 이용해 $red: #ff4634; 이런 식으로 선언한다.

HTML

    <p class="test">테스트용</p>

 

SCSS

$red: #ff4634;

$h: 150px;

.test {

  color: $red;

  height: $h;

  background-color: rgba(55, 55, 55, 0.5);

}

 

ON BROWSER

 

 

(2) SCSS 파일 외 변수

SCSS 파일 외부에서 변수를 선언할 때는「_vars.scss」파일을 만든 후 그곳에 선언한다. 그 후 다른 scss파일에서는 @import "vars"; 를 첫줄에 기입하면 전역 변수에 접근할 수 있다.

 

HTML

    <p class="test">테스트용</p>

 

SCSS

@import "vars";

.test {

  color: $red;

  height: $h;

  background-color: rgba(55, 55, 55, 0.5);

}

 

SCSS(_vars.scss)

.test {

  color: $red;

  height: $h;

  background-color: rgba(55, 55, 55, 0.5);

}

※ scss파일 이름 앞에 언더바(_)를 붙이면 css로 바꾸는 컴파일을 실행하지 않는다.

 

ON BROWSER

 

(3) !global
SCSS 파일 내에 선언된 변수이지만 $h: 100px; !global; 이런 식으로「!global」을 뒤에 붙이면 전역변수처럼도 쓸 수 있다. 그러나 이 경우 복잡도가 증가하므로 가능한한 지양하는 편이 좋다.