[SCSS]초 간단 정리 scss 변수파일 만들고 사용하는 방법 개발자 퍼블리셔라면 필수로 알아야 하는 지식!

scss를 사용하면서, CSS로 트랜스컴파일하지 않고 scss파일들에서만 사용하는 변수를 저장하기 위한 전용파일을 만들고 사용하는 방법에 대해서 살펴보겠습니다.

 

_variable.scss파일에 black 키워드를 가지는 변수를 만들고, 다른 scss파일에서 이 변수를 통해서 background-color를 검정색으로 적용해 보는 예시로 살펴보겠습니다. 결과는 아래 사진입니다.

 

 

그럼, 작업을 순서대로 살펴보겠습니다.

1. '_'가 들어간 scss파일은 css로 트랜스컴파일에 대상이 되지 않습니다.

예를 들어서 map_control.scss는 css로 트랜스컴파일되지 않습니다.

css로 트랜스컴파일되지 않는 특성을 이용해서 어차피 scss 파일들만 사용하는 변수파일에 이름을 '_'를 넣어서 만들어 줄 수 있습니다.

아래 사진을 보면, _variable.scss는 트랜스컴파일되지 않은 것을 확인할 수있습니다.

2. scss에서 변수 파일을 따로 만들어서 사용하는 경우가 많습니다.

scss변수만을 저장하는 scss파일은 트랜스컴파일을 해서 평범한 css로 만들 필요가 없습니다. scss들에서만 사용하면 되기 때문입니다.

그래서 변수를 저장하는 scss파일이름은  '_'로 시작하는 이름으로 파일명을 만든다고 합니다.

예를 들어서 _variable.scss처럼 만들 수 있습니다.

그럼 저도, _variable.scss라는 파일명으로 만들겠습니다.

 

3. _variable.scss파일에 변수를 입력해보겠습니다.

'$'는 변수명 앞에 붙여야 하는 scss의 문법입니다.

$BODY_BACKGROUND_COLOR: black;

 

4. 다른 scss파일에서 _variable.scss파일에서 사용해 보겠습니다.

@import "./_variable.scss";

body {
  background-color: $BODY_BACKGROUND_COLOR;
}

트랜스컴파일이 된 css 파일을 확인해 보면, 다음과 같습니다.

도움이 되셨다면, 광고 한 번씩 눌러주세요.