#10 - SCSS 변수 - 기본 값(!default) / 문자 보간 (#{})

변수 기본값 설정

플래그(!default)를 사용하면 아래와 같이 동작한다.

부트스트랩과 같은 외부 framework를 사용하는 경우, 변수가 겹치는 경우가 있어 자주 이용된다.

1. 앞서 선언된 변수가 있을 경우 : 앞에 선언된 값을 사용 (아래 예시 기준 100px)
2. 앞서 선언된 변수가 없을 경우 : 선언된 값을 사용 (아래 예시 기준 300px)

SCSS

$size : 100px;

.class1 {
  $size : 300px !default;
  width : $size;
}

Compile 된 CSS

.class1 {
  width : 100px ;
}

 

 

---

 

변수 문자 보간 - 문자열 삽입

#{}를 사용하여 문자열을 삽입할 수 있다.

SCSS

$url : "./image/";

.bg{
  background : url($url1 + "bg1.png");
}

Compile 된 CSS

.bg1 {
  background: url("./image/bg1.png");
}