Sass 변수(Variables)

변수는 나중에 다시 사용할 수 있는 정보를 저장하는 방법입니다.

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

• 문자열(strings)
• 숫자(numbers)
• 색(colors)
• 부울(booleans)
• 목록(lists)
• 널(nulls)

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

Sass 변수(Variable) 문법:

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

따라서 Sass 파일이 변환되면 변수 (myFont, myColor 등)를 사용하고 다음과 같이 변수 값이 있는 일반 CSS를 출력합니다.

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

Sass 변수 범위(Variable Scope)

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

$myColor: red;

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

p {
  color: $myColor;
}

<p> 태그 안의 텍스트 색상이 빨간색이나 녹색입니까? 그것은 빨간색이 될 것입니다!

다른 정의 인 $myColor : green;은 <h1> 규칙의 내부에 있으며, 거기에서만 사용할 수 있습니다!

h1 {
  color: green;
}

p {
  color: red;
}

이것이 가변 범위의 기본 동작입니다.

Sass !global 사용

변수 범위의 기본 동작은 !global 스위치를 사용하여 무시할 수 있습니다.

!global은 변수가 전역임을 나타냅니다. 이는 모든 수준에서 액세스 할 수 있음을 의미합니다.

$myColor: red;

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

p {
  color: $myColor;
}

이제 <p> 태그 안의 텍스트 색상이 녹색이 됩니다!

h1 {
  color: green;
}

p {
  color: green;
}

** 전역 변수는 규칙 외부에서 정의해야 합니다. "_globals.scss"라는 이름의 자체 파일에 모든 전역 변수를 정의하고 @include 키워드와 함께 파일을 포함하는 것이 좋습니다.