SCSS 변수

 SCSS 변수

SCSS를 사용하면 다음과 같은 변수에 정보를 저장할 수 있습니다.

strings
numbers
colors
booleans
lists
nulls

 

SCSS는 $ 기호와 이름을 사용하여 변수를 선언합니다.

$variablename: value;

 

다음 예제에서는 myFont, myColor, myFontSize 및 myWidth라는 4 개의 변수를 선언합니다. 변수를 선언 한 후에는 원하는 곳에서 변수를 사용할 수 있습니다.

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

---

 SCSS 가변 범위 

SCSS 변수는 정의 된 중첩 수준에서만 사용할 수 있습니다.

 

[SCSS 입력]

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

[CSS 출력]

h1 {
  color: green;
}

p {
  color: red;
}

 

h1의 color는 녹색, p의 color는 빨간색으로 나타납니다.

 

---

 !global 사용 

[SCSS 입력]

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

[CSS 출력]

h1 {
  color: green;
}

p {
  color: green;
}

h1의 color는 녹색, p의 color도 녹색으로 나타납니다.