1. variable

변수 규칙

$변수명 : 내용;

👉 숫자로 시작 ❌
👉 소문자 + '-' 사용

$alice-house: 1;

👉 대문자 + '_' 사용

$ALICE_HOUSE: 1;

Scope

$alice: 1;

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

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

span {
  line-height: $alice;  // 1
}

2. map

$변수명: (
	key1: value1,
    key2: value2,
)

3. function

값으로만 사용 됨

@function 함수명() {
  @return 값;
}

---

map 사용 예시

$flex-map: (
  start: flex-start,
  end: flex-end,
  between: space-between,
  around: space-around,
  stretch: stretch,
  center: center,
)

function 사용 예시

@function flex-value($key) {
	@return map-get(flex-map, $key);
}

mixin 사용 예시

@flexbox($align: center, $justify: center) {
  display: flex;
  align-items: flex-value($align);
  justify-content: flex-value($justify);
}