[CSS][Sass] Syntax | 02. Variables

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

 

Sass에서의 변수는 그 이름 앞에 $를 붙여 선언할 수 있습니다. 변수를 호출할 때도 동일하게 그 앞에 $를 붙입니다.

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Sass의 변수는 CSS 변수와는 달리 선언적(declarative)이지 않기 때문에, 중간에 값을 바꾸어도 그 전에 변수를 호출한 곳에서는 계속 이전에 쓰던 값을 사용하게 됩니다.

// 처음에는 value 1을 사용하다가
$variable: value 1;
.rule-1 {
  value: $variable;
}

// 중간에 value 2로 바꾸어도
$variable: value 2;
.rule-2 {
  value: $variable;
}

// * build * //

// 빌드한 CSS에서는 .rule-1에 여전히 value 1을 사용합니다.
.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

기본값(Default Values)

변수의 값을 사용자가 새로운 값으로 덮어쓰게 할 수도 있습니다.

 

이 경우 덮어쓰고자 하는 변수의 값 다음에 !default로 표시해줍니다.

 

만약 덮어쓰기를 하지 않는다면, 해당 변수의 값은 원래 선언한 값이 됩니다.

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

해당 변수들에 값을 덮어쓰려면, 그 변수들이 선언된 파일을 불러와야 합니다.

 

이 때 @use <파일 url> with ( ) 구문을 사용합니다.

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

위의 경우 black과 border-radius의 값을 새로운 값으로 덮어 썼습니다.

 

box-shadow는 덮어쓰지 않았으므로, 원래 선언되었던 '0 0.5rem 1rem rgba($black, 0.15)' 값이 사용됩니다.