[SCSS] 변수(Variables)와 데이터 타입(Data Types) (ft. 주석)

주석 (Comment)

CSS에서의 주석은 /* ... */ 로 해야 하는 반면에, Sass(SCSS)에서는 JavaScript처럼 두 가지 스타일의 주석을 사용한다.

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

여기서 또 Sass 와 SCSS에 다른 특징이 나오는데, 아무래도 SCSS가 CSS와 호환이 쉽게 나왔기 때문에 비슷한 측면이 있다.

// Sass
/* 컴파일되는
 * 여러 줄
 * 주석 */

// SCSS
/*
컴파일되는
여러 줄
주석
*/

Sass의 경우 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 더 나아가 라인까지 맞춰줘야 하는 반면에,

SCSS의 경우에는 CSS처럼 사용하면 된다.

 

데이터 타입 (Data Types)

데이터	설명	예시
Numbers	숫자를 의미하며 단위는 있거나 없다.	1, .82, 20px, 2em, ...
Strings	문자를 의미하며 따옴표가 있거나 없다.	bold, relative, "/images/a.png", "dotum"
Colors	색상 표현을 의미한다.	red, blue, #fff, rgba(255, 0, 0, 1)
Booleans	논리를 의미한다.	true, false
Nulls	아무것도 없음을 의미하며, null이 사용되면 컴파일 하지 않는다.	null
Lists	공백이나 콤마(,)로 구분된 값의 목록이다.	(a, b, c), a b
Maps	Lists와 유사하나 값이 Key: Value 형태이며 괄호()를 꼭 붙여야한다.	(a: a, b: b, c: c)

 

변수 (Variables)

CSS에서도 변수를 지정해서 사용할 수 있는데, CSS와는 다르게 "$"표시를 앞에 붙여서 변수를 선언한다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

to css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

 

기본 값 (Default Values)

이는 좀 특이한데, !default 플래그를 사용하며 쉽게 설명하자면 '변수와 값을 설정하겠지만, 혹시 기존에 선언한 변수가 있을 경우 기존에 선언한 변수를 사용하겠습니다.'라는 의미이다.

$color-primary: red;

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

to css

.box {
  background: red;
}

 

유효 범위 (Scope)

역시 변수를 사용하게 되면 변수에 항상 같이 딸려오는 개념인 유효 범위가 당연하게도 존재한다.

$global-variable: global value;

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

.sidebar {
  global: $global-variable;
}

to css

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

.sidebar {
  global: global value;
}

 

변수 재할당과 재선언

$variable: global value;

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

.sidebar {
  $side-val: $variable;
  value: $side-val;
}

to css

.content {
  value: local value;
}

.sidebar {
  value: global value;
}

 

전역 재 설정 (!global)

!global 플래그를 사용하면 변수의 유효 범위를 전역으로 강제 설정이 가능하다.

$variable: first global value;

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

.sidebar {
  value: $variable;
}

to css

.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

 

문자 보간 (#{})

자바스크립트 백 틱 문법과 마찬가지로 문자열 안에 변수 값을 넣을 수 있다.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

to css

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

* unquote()는 Sass(SCSS) 내장 함수이며, 문자에서 따옴표를 제거한다.

---

참고: https://sass-lang.com/documentation/variables

Sass: Variables

참고: https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!