[SCSS] 💎 변수와 타입 (variable $)

 

Comment (주석)

Sass의 주석이 CSS 와 다른점은 한 줄 주석이 추가되었다는 점 입니다.

 

Sass

/* You can See me */

// You can't see me

/* You
   Can
   See
   Mee
*/

---

Data Types (데이터 종류)

Numbers	숫자	1, .82, 20px, 2em…
Strings	문자	bold, relative "/images/a.png", "dotum"
Colors	색상 표현	red, blue #FFFF00 rgba(255,0,0,.5)
Booleans	논리	true, false
Nulls	아무것도 없음. 컴파일 하지 않음.	null
Lists	공백이나 ,로 구분된 값의 목록	(apple, orange, banana) apple orange
Maps	Lists와 유사하나 값이 Key: Value 형태	(apple: a, orange: o, banana: b)

---

Variable (변수)

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

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

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

​

Sass

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

​CSS

.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

 

Variable Scope (변수 유효 범위)

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

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

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

 

Sass

$primary-color: #333; /* 전역 변수 */

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

p {
  color: $primary-color; 
}

CSS

body {
  background-color: #eee;
}

p {
  color: #333;
}

​

변수 재 할당(Variable Reassignment)

Sass

$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;
$color-danger: $red;

.box {
  color: $color-primary;
  background: $color-danger;
}

CSS

.box {
  color: #0000FF;
  background: #FF0000;
}

 

!global (전역 설정)

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

​

Sass

$primary-color: #333;

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

p {
  color: $primary-color;

CSS

body {
  background-color: #eee;
}

p {
  color: #eee;
}

​

!default (초깃값 설정)

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

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

 

Sass

$color-primary: red;

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

CSS

.box {
  background: red;
}

 

문법은 알겠지만 당최 어디에 쓰이는지 모를 것입니다.

예를 들어, Bootstrap 같은 외부 Sass(SCSS) 라이브러리를 연결했더니 변수 이름이 같아 내가 작성한 코드의 변수들이 Overwrite(덮어쓰기) 된다면 문제가 있겠죠.
반대로 내가 만든 Sass(SCSS) 라이브러리가 다른 사용자 코드의 변수들을 Overwrite 한다면, 사용자들은 그 라이브러리를 더 이상 사용하지 않을 것입니다.
이럴 때 Sass(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;

/* 내 라이브러리는 이러한 변수들을 사용할 것인데,
만일 이 변수명을 기존에 사용하고 있는 다른 라이브러리가 있다면, 그 라이브러리의 설정값을
따르겠다. 라는 뜻이다. */

 

#{} (문자 보간)

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

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

 

Sass

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

CSS

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

---

Reference

https://velopert.com/1712

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