Sass(SCSS) Variables

변수(Variables)

Sass 변수는 간단합니다. $로 시작하는 이름에 값을 할당하면 값 자체가 아니라 해당 이름을 참조할 수 있습니다. 변수는 반복을 줄이고 복잡한 계산을 하고 라이브러리를 구성하는 등의 작업을 가능하게 합니다.

  // 변수 선언
  <variables> : <expression>

• SCSS

  $base-color: #c6538c;
  $border-dark: rgba($base-color, 0.88);
  
  .alert {
    border: 1px solid $border-dark;
  }

• CSS

  .alert {
    border: 1px solid rgba(198, 83, 140, 0.88);
  }

---

기본값(Default Values)

Sass에는 !default 플래그를 제공하는데, 변수가 정의되지 않았거나 값이 null인 경우에만 변수에 값을 할당하게 합니다. 그렇지 않은 경우에는 기존 값이 사용됩니다.

• SCSS

  // _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;
  }

  // style.scss
  $black: #222;
  $border-radius: 0.1rem;

  @import 'library';

• CSS

  code {
    border-radius: 0.1rem;
    box-shadow: 0 0.5rem 1rem rgba(#222, 0.15);
  }

---

범위(Scope)

스타일시트의 최상위 레벨에서 선언된 변수는 전역변수입니다. 전역변수는 다른 스타일시트 어디에서도 액세스 할 수 있습니다. 반면 블록 내에서 선언된 변수는 블록 내에서만 액세스 할 수 있는데 이를 지역변수라고 부릅니다.

• SCSS

  $global-variable: global value;
  
  .content {
    $local-variable: local value;
    global: $global-variable;
    local: $local-variable;
  }
  
  .sidebar {
    global: $global-variable;
  
    // This would fail, because $local-variable isn't in scope:
    // local: $local-variable;
  }

• CSS

  .content {
    global: global value;
    local: local value;
  }
  
  .sidebar {
    global: global value;
  }

그림자(Shadowing)

지역변수는 전역변수와 같은 이름으로 선언될 수 있습니다. 실제로 동일한 이름을 가진 두 개의 다른 변수가 있는데 하나는 지역변수고 하나는 전역변수입니다. 아래와 같이 하면, 지역변수를 작성한 작성자가 실수로 전역 변수의 값을 변경하지 않도록 할 수 있습니다.

• SCSS

  $variable: global value;
  
  .content {
    $variable: local value;
    value: $variable;
  }
  
  .sidebar {
    value: $variable;
  }

• CSS

  .content {
    value: local value;
  }
  
  .sidebar {
    value: global value;
  }

지역(local) 범위 내에서 전역 변수의 값을 설정해야 하는 경우엔 !global 플래그를 사용할 수 있습니다. !global로 플래그가 지정된 변수 선언은 항상 전역 범위에 할당됩니다.

• SCSS

  $variable: first global value;
  
  .content {
    $variable: second global value !global;
    value: $variable;
  }
  
  .sidebar {
    value: $variable;
  }

• CSS

  .content {
    value: second global value;
  }
  
  .sidebar {
    value: second global value;
  }

Flow Control Scope

흐름 제어 규칙에서 선언된 변수에는 특별한 범위 규칙이 있습니다. 즉, 흐름 제어 규칙과 동일한 수준의 변수를 그림자(shadow) 처리하지 않습니다.

• SCSS

  $dark-theme: true !default;
  $primary-color: #f8bbd0 !default;
  $accent-color: #6a1b9a !default;
  
  @if $dark-theme {
    $primary-color: darken($primary-color, 60%);
    $accent-color: lighten($accent-color, 60%);
  }
  
  .button {
    background-color: $primary-color;
    border: 1px solid $accent-color;
    border-radius: 3px;
  }

• CSS

  .button {
    background-color: #750c30;
    border: 1px solid #f5ebfc;
    border-radius: 3px;
  }