[CSS] CSS 변수와 SCSS 변수의 차이 (사용자 지정 속성)

CSS에서 사용자 지정 속성(CSS 변수)를 정의할 때는 전용 표기법이 있다.

이 표기법은 SCSS와 CSS에서 사용하는 방법이 다르다.

 

1. 언제 사용하는가?

복잡한 웹사이트에서 많은 값을 반복적으로 사용할 때,

예를 들어 어떤 특정 색상을 반복적으로 사용할 때

혹시 그 색상을 바꿔야하는 일이 생길 경우

한 영역에 값을 저장해놓고 참조를 통해 값을 사용하는 것이 좋다.

 

2. CSS 변수

:root {
  --main-bg-color: brown;
}

element {
  background-color: var(--main-bg-color);
}

 

root 위치에 선언할 경우 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있다.

이렇게 선언한 변수를 사용할 때는 var() 함수를 지정하고 매개변수로 사용자 지정 속성의 이름을 넣는다.

 

3. SCSS 변수

$main-bg-color: brown;

element {
  background-color: $main-bg-color;
}

 

SCSS의 경우 변수 이름 앞에 $를 붙여서 선언하고,

사용할 때도 똑같이 $를 붙여서 사용한다.

 

SCSS 변수는 선언된 블록 내부에서만 유효하며,

!global을 붙일 경우 전역 변수로서 사용할 수 있다.