SCSS 기능 - 변수의 사용

이전의 포스팅에서 SCSS의 기능을 소개했다. 

그 중에 첫번째인 변수의 사용의 기능을 확실하게 알기 위해 포스팅을 진행하려한다.

 

SCSS에서의 변수사용 기능

SCSS는 CSS에 변수 개념을 도입해주는 기능이 있다.

숫자, 문자열, 폰트, 색상 등등의 형태를 사용할 수 있게 해준다.

 

내가 작성했던 코드를 예시로 살펴보겠다.

GitHub - plla2/game-store

나는 먼저 테마컬러를 미리 잡아두고, 나머지 배경, 텍스트의 컬러를 변수로 만들어 사용하였다.

 

변수 등록, 사용

// _colors.scss

$bg1: #141516;
$bg2: #0f1011;
$bg3: hsl(0, 0%, 16%);
$bg4: hsl(0, 0%, 25%);
$text: hsl(0, 0%, 80%);
$text2: hsl(0, 0%, 60%);
$accent: #a084dc;

위와 같이 변수를 지정하거나 사용할 땐 $문자를 사용한다.

// App.scss

@use "colors";

.App {
	display: flex;
    	flex-direction: column;
	background-color: colors.$bg1;    <-- #141516
    
    h1 {
    	color: colors.$accent;    <-- #a084dc
        }
}

@use는 다음 포스팅에서 설명하도록 하겠다.

위처럼 @use를 통해 변수들을 선언했던 _colors모듈을 가져와 변수를 사용할 수 있다.

 

변수 스코프

하지만 SCSS에서도 js처럼 스코프라는 변수범위가 존재한다.

만약, 변수를 특정 선택자에서 선언했다면, 해당 선택자에서만 접근이 가능하다.

$example-color: #000000;  /* 전역변수 */

body {
	$example-color: #999999;  /* 지역변수 */
    	background-color: $example-color;   <-- 여기서의 background-color는 #999999가 된다.
}

p {
	color: $example-color;   <-- 여기서의 color는 #000000이 된다.
}

위처럼 변수범위가 있기 때문에 전역변수, 지역변수의 영향을 받게된다.

 

변수 재할당

또한, 아래와 같이 변수 재할당도 가능하다.

$red: #FF0000;
$blue: #0000FF;

$example-color1: $blue;
$example-color2: $red;

.box {
  color: $example-color1;     <-- #0000FF 색상
  background: $example-color2;    <-- #FF0000 색상
}

값을 할당해놓았던 변수를 새로운 변수에 재할당하는 것도 가능하다.

 

변수 전역설정

변수를 !global 이라는 플래그를 통해 스코프를 전역으로 설정할 수 있다.

위에서 변수 스코프의 코드를 그대로 가져와서 보면, !global 플래그를 사용해 #999999를 전역변수로 만들어 범위 밖의 선택자인 p태그선택자에서도 #999999를 참조할 수 있도록 해준다.

$global-example-color: #000000;  /* 전역변수 */

body {
	$global-example-color: #999999 !global;   /* global 플래그를 통해 전역변수화 */
    	background-color: $global-example-color;   <-- 여기서의 background-color는 #999999가 된다.
}

p {
	color: $global-example-color;   <-- 여기서의 color도 #999999이 된다.
}

 

초깃값 설정

!default 플래그를 사용하여 할당되지 않은 변수의 초깃값을 설정해준다.

이게 무슨소리냐? 변수와 값을 설정해주었지만, MUI 나 Bootstrap등과 같은 외부 라이브러리와 변수이름이 겹쳐 덮어쓰기가 되거나, 다른 협업하는 개발자의 변수들과 겹치게 되면, 그대로 덮어쓰기가 되기 때문에 !default 플래그를 사용한다.

 

!default를 붙임으로써 '만약 이 변수명과 다른 라이브러리 혹은 코드의 변수명이 겹치게 되면 이 변수를 버리고, 그 겹친 변수의 값을 따르겠다.'  라는 뜻으로 생각하면 된다. 내가 작성한 _colors.scss의 변수들을 예로 들면,

// _colors.scss

$bg1: #141516 !default;
$bg2: #0f1011 !default;
$bg3: hsl(0, 0%, 16%) !default;
$bg4: hsl(0, 0%, 25%) !default;
$text: hsl(0, 0%, 80%) !default;
$text2: hsl(0, 0%, 60%) !default;
$accent: #a084dc !default;

이런식으로 !default 플래그를 붙여서 사용하면 된다.

 

 

SCSS를 사용하면서 가장 직접 와닿은 장점이 이 변수기능과 다음으로 포스팅할 중첩기능이다.

처음 사용했을 때는 그냥 색상코드를 직접 넣는게 더 편하지않나? 라고 생각을 했었지만, 만약 디자이너가 준 시안의 색상이 정해져있다면 변수로 쫙 설정을 해두고 사용해두면 정말 편할거 같다는 생각을 하였다. 또한, 유지보수 측면에서도 변수 선언 부분만 변경해주면 되니 아주 효율적인 개발이 가능하다는 생각이 들었다.