[basic] SCSS - Variables (변수)

1. SASS 변수 구문
2. SASS 변수 기본 유효범위 - 정의된 범위에서만 유효
3. SASS 변수 유효범위 확장 - !global 키워드
4. 전역변수 관리 Tip

SASS 변수 구문

 

$variablename: value;

 

---

PS. 가능한 value 형태.

 

• strings
• numbers
• colors
• booleans
• lists
• nulls

SASS 변수 기본 유효범위 - 정의된 범위에서만 유효

[SASS]

 

$hzcolor: red;

h1 {

  $hzcolo: blue;

  color: $hzcolo;

}

p {

  color: $hzcolo;

}

 

---

[CSS]

 

h1 {

  color: blue;

}

p {

  color: red;

}

 

SASS 변수 유효범위 확장 - !global 키워드

[SASS]

 

$hzcolor: red;

h1 {

  $hzcolo: blue !global;

  color: $hzcolo;

}

p {

  color: $hzcolo;

}

 

---

[CSS]

 

h1 {

  color: blue;

}

p {

  color: blue;

}

전역변수 관리 Tip

 

전역변수는 일반 규칙 외부에서 별도 정의 필요.

즉,

"_globals.scss" 파일에 모든 전역변수 정의 후,
@include 키워드로 그 파일을 인클루드해서 사용.