[Sass문법 정리] 3. 변수, @import

4.4. 변수

4.4.1. 변수란?

저장한 특정 값을 재사용 할 수 있는 값. 변수 앞에는 항상 $사인이 붙습니다

ex) $변수이름: 속성값;

SCSS예제

$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");
}

 

4.4.2. 변수의 유효범위

변수는 선언된 중괄호{ } 안에서만 적용이 가능합니다. 변수는 또한 재할당이 가능합니다. 즉, 변수에다 다른 변수 값을 할당할 수 있습니다.

예제

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

 

4.4.3. 변수의 전역설정 (global variable)

변수 값 뒤에 !global 플래그를 사용하면 해당 변수는 중괄호{ }를 벗어나 해당 파일 전역에서 사용이 가능해집니다.

예제

.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}

 

글로벌 변수와 같은 이름으로 중괄호 내에 새로운 변수를 정의한다면 overide되어 중괄호 안에 있는 값이 사용되게 됩니다.

SCSS예제

$color: #000;
.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}
.box3 {
  $color: #222;
  background: $color;
}

 

CSS예제(컴파일 후)

.box1 {
  background: #111;
}
.box2 {
  background: #111;
}
.box3 {
  background: #222;
}

 

4.4.4. !default (기본값 설정)

!default 플래그는 할당되지 않은 변수의 기본값을 설정 하게 되며 이미 정의된 변수의 값이 있다면 무시되고 기존의 값으로 대체되게 됩니다. 주로 bootstrap이나 다른 프레임워크를 사용하게 될 경우 override하지 않기 위해서 사용합니다.

SCSS예제

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

 

CSS예제(컴파일후)

.box {
  background: red;
}

 

4.4.5. 변수의 문자 보간

중괄호#{ }를 이용해 문자열 중간에 변수 값을 삽입할 수 있습니다.

SCSS 예제

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

CSS예제(컴파일후)

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

 

4.5. @import(가져오기)

4.5.1. @import 사용법

외부에서 SCSS파일을 가져와 컴파일시 CSS단일 파일로 출력합니다. 가져온 파일에 정의된 모든 변수 또는 mixins등을 주 파일에서 사용 가능합니다.

SCSS에서 @import를 사용하는 경우 SCSS파일을 가져오지만 아래의 경우에는 CSS파일로 컴파일된 후 가져오는 경우가 존재합니다.

-        파일 확장자가 .css일 경우

-        파일 이름이 http://로 시작하는 주소일 경우

-        url() 함수로 import하는 경우

-        미디어쿼리가 있는경우

예제

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

 

4.5.2. 여러 파일 가져오기

하나의 @import로 여러 파일을 가져올 수도 있습니다.파일 이름은 ,로 구분합니다.

@import "header", "footer";

 

파일분할

파일 이름 앞에 _(언더스코어)를 붙여(_header.scss와 같이) @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않습니다.

즉, import를 한 후 기존의 파일이 중복되어 SCSS에서 CSS파일로 컴파일 되는 걸 피하고 싶다면

import로 가져온 SCSS파일 앞예 언더스코어 _를 붙이면 해당파일은 CSS파일로 컴파일 되지 않습니다.

예제

Sass-App
  # ...
  ├─scss
  │  ├─_header.scss
  │  ├─_side-menu.scss
  │  └─main.scss
  # ...
// main.scss
@import "header", "side-menu";

 

컴파일후 예제

Sass-App
  # ...
  ├─css
  │  └─main.css  # main + header + side-menu
  ├─scss
  │  ├─header.scss
  │  ├─side-menu.scss
  │  └─main.scss
  # ...