SASS의 기본 변수

경우에 따라 변수 값이 아직 정의되지 않았지만, 코드에서 사용해야 하는 경우, 기본값을 설정할 수 있으며, 뒤에 !default 플래그를 붙입니다.

변수에 이미 값이 할당되었다면, 그 값은 그대로 유지되지만, 새로운 빈 변수를 생성한 경우에는 기본값이 지정된다는 점에 유의해야 합니다.

styles.scss$name: "John";
$name: "Bob" !default;
$new_name: "Mark" !default;

#main {
  name: $name;
  new_name: $new_name;
}

위 코드를 컴파일한 결과는 다음과 같습니다:

styles.css#main {
  name: "John";
  new_name: "Mark";
}

변수에 null 값을 할당하면, !default은 이를 값이 없는 것으로 간주합니다:

styles.scss$name: null;
$name: "Bob" !default;

#main {
  name: $name;
}

컴파일 후에는 다음과 같이 표시됩니다:

styles.css#main {
  name: "Bob"; 
}