sass

변수, 보간

1. 변수(Variables)

Sass의 변수는 간단합니다. $변수명: 값; 으로 선언하고 사용합니다.
단순함에도 불구하고 Sass가 제공하는 가장 유용한 도구 중 하나라고 생각합니다.
변수를 사용하면 반복을 줄이고, 복잡한 수학을 수행하고, 라이브러리를 구성하는 등의 작업을 수행 할 수 있습니다.

SCSS

$color-def: #c6538c;
$color-border-def: rgba($color-def, .8);

.alert {
  border: 1px solid $color-border-def;
}
CSS

.alert {
  border: 1px solid rgba(198, 83, 140, 0.8);
}
Sass 변수는 dash(-)과 underscore(_)을 동일하게 취급합니다. 이는 $font-size 와 $font_size가 같다는 뜻입니다.

기본 값

일반적으로 변수에 값을 할당할 때 해당 변수에 이미 값이 있는 경우 이전 값을 덮어쓰게됩니다.
그러나 Sass 라이브러리를 작성하는 경우 CSS를 생성하는 데 사용하기 전에 사용자가 라이브러리의 변수를 구성하도록 허용 할 수 있습니다.
이를 가능하게 하기 위해 Sass는 !default 플래그를 제공합니다.
변수가 정의되지 않았거나 값이 null인 경우에만 변수 값을 할당하고 그렇지 않으면 기존 값이 사용됩니다.

SCSS

$color-def: #f00;

.box {
  $color-def: #ff0 !default;
  background: $color-def;
}
CSS

.box {
  background: #f00;
}
모듈 설정

!default로 정의도니 변수는 @use를 사용할때 설정 할 수 있습니다.
Sass 라이브러리는 종종 !default 변수를 사용하여 사용자가 라이브러리 CSS를 설정 할 수 있도록 합니다.
(<변수>: <값>, <변수>: <값>)을 사용하요 @use <URL>을 작성합니다.
설정된 값은 변수의 기본값보다 우선한고 !default 플래그가 있는 stylesheet의 최상위 레벨에서 작성된 변수만 설정할 수 있습니다.

SCSS(partial)

// base/_list.scss
$black: #000 !default;
$border-radius: 10px !default;
$box-shadow: 0 0 1px rgba($black, .15) !default;

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

// style.scss
@use 'base/list' with (
  $black: #222,
  $border-radius: 5px
);
CSS

code {
  border-radius: 5px;
  box-shadow: 0 0 1px rgba(34, 34, 34, 0.15);
}

Scope

stylesheet의 최상위에 선언된 변수는 전역변수입니다. 이것은 선언된 후 모듈의 어디에서나 액세스 할 수 있습니다.
그러나 SCSS의 중괄호 내애 선언되어 있는 변수는 지역변수로, 해당 중괄호 안에서만 사용 가능합니다.

SCSS

.body {
  $base-color: #c6538c;
  border-color: $base-color;
}
CSS

.body {
  border-color: #c6538c;
}
SCSS

.body {
  $base-color: #c6538c;
}
.main {
  border-color: $base-color;
}
ERR

Error: Undefined variable.
  ╷
N │   border-color: $base-color;
  │

위의 코드처럼 지역변수를 다른 지역에서 사용할 경우 에러가 뜹니다.

Shadowing

지역 변수는 전역 변수와 같은 이름으로 선언할 수도 있습니다.
이렇게 하면 지역 변수를 작성하는 작성자가 알지 못하는 전역 변수의 값을 실수로 변경하지 않도록 할 수 있습니다.

SCSS

$variable: global value;

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

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

지역 범위 내에서 전연 변수의 값을 설정해야하는 경우 !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;
}
!global 플래그는 파일의 최상위에 이미 선언된 변수를 설정할때만 사용할 수 있습니다. 새 변수를 선언할때는 사용할 수 없습니다.

2. 보간(Interpolation)

아직 설명하지 않았지만 @each나 @mixin등의 문법을 사용할 때,
변수명을 인수나 속성으로 사용하고 싶을 경우가 생기는데, 이럴때 사용할 수 있는게 보간입니다.
보간을 사용하는 방법은 다음 중 하나의 식을 #{}로 감싸기만 하면 됩니다.

SCSS

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);
CSS

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

In SassScript

Unquoted(따옴표가 없는 문자열)에서 SassScript를 삽입하기 위해 보간법을 사용할 수 있습니다.
이는 동적으로 이름을 생성하거나(예: 애니메이션 용) 슬래시로 구분된 값을 사용할 때 유용합니다.
SassScript의 보간은 항상 Unquoted의 문자열을 반환합니다.

SCSS

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};
  @keyframes #{$name} {
    @content;
  }
  animation: {
    name: $name;
    duration: $duration;
    iteration-count: infinite;
  }
}

.pulse {
  @include inline-animation(2s) {
    from {
      background-color: yellow 
    }
    to { 
      background-color: red 
    }
  }
}
CSS

.pulse {
  animation-name: inline-uclw7j5;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uclw7j5 {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}
보간은 문자열에서 값을 주입하는데 유용하지만 SassScript 표현식에서는 거의 필요하지 않습니다. 
속성 값에서 변수를 사용하기 위해서 color: #{$color}를 쓰는 대신 color: $color를 쓰면됩니다.
By CSS, Sass, TechComment on 아마도 Sass – 3

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다