본문 바로가기
  • purple-whale
SASS(SCSS)

SCSS 변수

by purple-whale purple-whale 2021. 1. 21.

 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도 녹색으로 나타납니다.

'SASS(SCSS)' 카테고리의 다른 글

SCSS - @import 하기  (0) 2021.01.22
SCSS : @mixin - @include 사용하기  (0) 2021.01.22
SCSS 작성 하기  (0) 2021.01.22
SCSS 변수  (0) 2021.01.21
SCSS란?  (0) 2021.01.21
SASS 컴파일 하기 (window)  (0) 2021.01.21

댓글0