[SCSS] 변수와 타입

Sass는 css에 변수 개념을 도입해줍니다.

변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, list, maps가 있습니다.

변수를 사용할 때는 php같이 $문자를 사용합니다.

SCSS

$color-primary: #e96900;
$url-images: '/assets/images/';
$w: 200px;
.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + 'bg.jpg');
}

유효 범위

SCSS의 변수엔 변수 범위가 있습니다.

변수를 특정 selector에서 선언하면 해당 selector에서만 접근이 가능합니다.

선언된 블록({})내에서만 유효범위를 가집니다.

SCSS

$color: #333; /* 전역 변수 */
body {
  $color: #eee; /* 지역 변수 */
  background-color: $color;
}
p {
  color: $color;
}

변수 재할당

$red: #ff0000;
$blue: #0000ff;
$color-primary: $blue;
$color-danger: $red;
.box {
  color: $color-primary;
  background: $color-danger;
}

global (전역 설정)

!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있습니다.

SCSS

$primary-color: #333;
body {
  $primary-color: #eee !global;
  background-color: $primary-color;
}
p {
  color: $primary-color;
}

default (초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정합니다.

**‘변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우는 현재 설정하는 변수의 값은 사용하지 않겠다’**는 의미로 쓸 수 있습니다.

SCSS

$color-primary: red;
.box {
  $color-primary: blue !default;
  background: $color-primary;
}

Bootstrap같은 외부 SCSS라이브러리를 연결했더니 변수 이름이 같아 내가 작성한 코드의 변수들이 overwrite된다면 문제가 될 것이다.

이럴 때 SCSS라이브러리에서 사용하는 변수에 !default 플래그가 있다면 기존 코드를 overwrite 하지 않고도 사용할 수 있습니다.

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

#{} (문자 보간)

자바스크립트의 백틱 ${} 문법과 같다고 보면 됩니다.

중괄호 안에 들어간 값은 문자열로 치환됩니다.

SCSS

$family: unquote("Droid+Sans"); /* Sass의 내장 함수 unquote()는 문자에서 따옴표를 제거 */ 
@import url("<http://fonts.googleapis.com/css?family=#{$family}>"); /* #{$family} == Droid+Sans */