Sass 변수

Sass 변수

변수는 정보를 저장하는 방법입니다. 이를 후에 반복적으로 사용할 수 있습니다.

Sass를 통해, 다음을 할 수 있습니다:정보변수에 저장됩니다. 예를 들어:

• 문자열
• 숫자
• 색상
• 부울 값
• 리스트
• null

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

Sass 변수 문법:

$variablename: value;

다음 예제는 4 개의 변수를 선언합니다.:

• myFont
• myColor
• myFontSize
• myWidth

변수를 선언한 후, 어디서든 이러한 변수를 사용할 수 있습니다.:

SCSS 문법:

$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와 CSS에 포함된 변수 값을 출력합니다. 예를 들어:

CSS 출력:

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

Sass 변수 범위

Sass 변수는 그들이 정의된 가로접점 수준에서만 사용할 수 있습니다.

다음 예제를 보세요:

SCSS 문법:

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

<p> 태그 내의 텍스트 색상은 빨강이거나 녹색인가요? 빨강입니다!

또 다른 정의, $myColor: green;은 다음 위치에 있습니다 <h1> 규칙 내에서만, 그리고 그곳에서만 사용할 수 있습니다!

따라서, CSS 출력은 다음과 같습니다:

CSS 출력:

h1 {
  color: green;
}
p {
  color: red;
}

좋습니다, 이는 변수 범위의 기본 동작입니다.

Sass !global 사용

사용할 수 있습니다 !global 변수의 범위를 덮어쓰는 기본 동작을 변경합니다.

!global 변수가 모든 수준에서 접근할 수 있는 전역 변수라는 것을 나타냅니다.

아래의 예제를 보세요（위와 동일하지만 추가되었습니다）: !global）：

SCSS 문법:

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

지금 <p> 태그 내의 텍스트 색상은 녹색이 될 것입니다!

따라서, CSS 출력은 다음과 같습니다:

CSS 출력:

h1 {
  color: green;
}
p {
  color: green;
}

추가로:전체 규칙 외에 전역 변수를 정의해야 합니다. 모든 전역 변수를 "_globals.scss" 파일에 정의하고 사용하는 것이 좋습니다. @include 이 파일을 포함하는 키워드.