Sass 변수와 !default 플래그

!default 플래그를 알아보기 전에 변수를 재정의하는 기본 방식부터 살펴본다.

변수 재정의

모든 프로그래밍 언어에서 변수가 그렇듯이 Sass에서도 변수에 값을 다시 정의²할 수 있다. 즉 변수에 값을 재할당할 수 있는데, 변수를 참조하기 전 가장 나중에 작성한 값이 변수의 값이다.

$content: "환영합니다";
$content: "안녕하세요"; // 변수 재정의
 
#main {
  content: $content; // "안녕하세요"
}
 
$content: "또 봅시다"; // 다시 변수 재정의
 
#footer {
  content: $content; // "또 봅시다"
}

변수 기본값 정의 !default

변수를 재정의하면 나중에 작성한 값이 적용된다. 그런데 Sass에는 이런 값 할당의 우선순위를 바꿀 방법이 있다. 바로 !default 플래그이다. 이 플래그는 변수값과 세미콜론 ; 사이에 작성한다. CSS에서 !important 플래그를 작성하는 것과 같은 문법이다.

$content: "안녕하세요" !default;

!default 플래그를 더한 변수 정의문 예시가 있다. 이것은 $content 변수에 (a)값이 이미 있다면 무시하고, (b)값이 없다면 작성한 값을 할당하라는 의미이다. 뒤에 작성하는데도 정의의 우선순위가 가장 낮아지는 것이다.

$content: "Hello World!";
$content: "환영합니다";
$content: "안녕하세요" !default; // 재할당 무시
 
#main {
  content: $content; // "환영합니다"
}

(1)이전에 변수를 정의하지 않았거나, (2)변수를 정의했지만 값이 null인 경우, 이 변수의 값이 없다고 판단한다. 이렇듯 변수의 값의 사전정의 여부에 따라 조건부로 값을 할당할 수 있다.

$content: null;
$content: "안녕하세요" !default; // 기본값 할당
 
#main {
  content: $content; // "안녕하세요"
}

!default의 활용 - 라이브러리 사용자화

!default는 라이브러리의 기본값을 정의하고 사용자가 이를 변경할 수 있게 할 때 유용하다. 사실 일반적으로 Sass를 사용하는 개발자는 이 플래그를 쓸 일이 거의 없을 것이다. 변수를 포함해 작성한 Sass 내용을 모두 직접 관리하며 코드를 작성하는 경우이기 때문이다.

하지만 부트스트랩과 같은 라이브러리 Sass를 작성하는 경우라면 !default 사용은 거의 필수라 할 수 있다. 예를 들어 부트스트랩³은 다수의 변수를 갖고 있는데, _variables.scss에 정의한 모든 변수는 !default 플래그를 가지고 있다.

$white:  #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
...

이렇게 변수를 모두 기본값으로 작성해 놓으면, 이 라이브러리를 가져와 사용하는 사람은 원본을 수정하지 않고 변수 값을 사용자화 할 수 있다.

다음 예시처럼 _custom.scss 파일에 값을 변경하고 싶은 변수를 정의하고, 부트스트랩을 이어서 불러오면 된다. 그러면 부트스트랩 내부의 조건부 변수 정의는 무시하므로, 사용자가 정의한 변수 값을 대신 사용하게 된다.

@import "custom";
@import "~bootstrap/scss/bootstrap";