1. 변수(Variable)

① 변수선언

• 반드시 변수이름 앞에 $기호를 넣어야한다.($변수명 : 값;)
• 반복되는 목적의 속성 값을 하나의 변수에 넣어주어 여러 곳에 값을 할당하여 줄 수 있다.
• 변수의 이름에는 영문자(대소문자구분),-,_,숫자 사용가능
  → 소문자일 경우 : $select-5;
  → 대문자일 경우 : $SELECT_5;
• 변수에 넣을 수 있는 값은 문자열, 숫자, 색상, boolean, List, Null 등 가능

✏️ 입력
/* 변수선언 */
$color-pink : #ffaaaa;

/* 변수사용 */
h1 {
  color: $color-pink;
}

2. 변수의 유효범위와 재할당

① 변수의 유효범위(Variable Scope)

• Sass 변수의 유효범위는 선언된 블록({ })내에서만 유효범위를 가진다.

✏️ 입력
/* 변수의 유효범위 */
.box1 {
  $color-pink : #ffaaaa;
  background-color: $color-pink;
}
.box2 {
  background-color: $color-pink; /* Error */
}

② 변수의 재할당(Variable Reassignment)

✏️ 입력
/* 변수의 재할당 */
$color-pink : #ffaaaa;
$color-red : #ff0000;

$color-primary : $color-red;
$color-danger : $color-pink;

.box1 {
  color: $color-primary;
  background-color: $color-danger;
}

/* 컴파일된 CSS */
.box1 {
  color: #ff0000;
  background-color: #ffaaaa;
}

3. #{ } (변수 문자 보간)

• #{ }을 사용하여 어디서든 변수값을 문자열로 넣을 수 있습니다.

✏️ 입력
$value-1 = 1;
$value-10 = 10;

.box1 {
  width: $value-1 + $value-10 + px; /* width: 11px; */
}
.box2 {
  width: #{$value-1} + #{$value-10} + px; /* width: 110px; */
}