자주 사용하는 CSS value를 값으로 저장하여 사용
$변수명: value;
' '
로 감싸주어야 한다.$
를 붙여주어야 한다.영문 대소문자
, -
, _
, 숫자
만 사용가능소문자
, -
조합 ✔대문자
, _
조합Sass에도 스코프 개념이 있다. (자바스크립트의 스코프를 생각하면 쉬움)
$foo: 1;
p {
line-height: $foo; // 1
}
a {
$foo: 2;
line-height: $foo; // 2
}
key: value
형태를 갖는 변수 선언 가능$flex-map: (
start: flex-start,
end: flex-end,
between: space-between,
around: space-around,
stretch: stretch,
center: center,
);
map-get
내장함수를 사용하여 value
값 추출map-get(map 변수, key);
map-get($flex-map, start); // flex-start
map-get($flex-map, around); // space-around