Sass - variable

Sass의 변수 선언

자주 사용하는 CSS value를 값으로 저장하여 사용

• Typography
• Color
• Grid

선언 방법

$변수명: value;

변수에 담을 수 있는 값들

• CSS value 모든 값
• number
• string *문자열은 ' '로 감싸주어야 한다.
• boolean
• list / map

유의사항

• 반드시 앞에 $를 붙여주어야 한다.
• 영문 대소문자, -, _, 숫자 만 사용가능
• 변수명은 숫자로 시작할 수 없다.

컨벤션

1. 소문자, - 조합 ✔
2. 대문자, _ 조합

스코프

Sass에도 스코프 개념이 있다. (자바스크립트의 스코프를 생각하면 쉬움)

$foo: 1;
p {
  line-height: $foo; // 1
}

a {
  $foo: 2;
  line-height: $foo; // 2
}

map

• 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