SCSS | 변수와 산술 연산자

앞의 포스트에서 잠깐 보았던 변수에 대해 설명하겠습니다.
변수는 SCSS에만 있는 기능이 아니라 CSS에도 변수가 있고, 아래의 코드와 같이 선언 및 사용할 수 있습니다.
CSS에서는 :root 또는 특정선택자 내에서만 변수를 생성하고 사용할 수 있습니다.

:root {
  --main-bg-color: #fff;
}

div {
  background-color: var(--main-bg-color);
}

SCSS에서의 변수는 $기호를 사용하여 변수를 만들 수 있습니다.
다른 프로그래밍 언어들과 마찬가지로 변수명은 숫자로 시작할 수 없고, -, _외에는 특수기호를 사용할 수가 없습니다.
SCSS에서는 다음과 같이 변수를 선언하고 사용할 수 있습니다. 변수에는 모든 속성들의 값이 들어갈 수 있습니다.
변수는 자신이 선언된 블록 내에서만 사용될 수 있습니다. 예를 들어 items 내에 선언되어있는 $item-bg는 items블록 내부에서는 사용될 수 있지만 블록 밖에서는 사용할 수 없습니다.

items {
  $item-bg : #fff;
  item {
    background-color: $item-bg;
  }
}

변수를 딕셔너리처럼 사용할 수도 있습니다.

$font-color: (
  primary: #0D6EFD,
  secondary: #6C757D,
  warning: #FFC107
);

item {
  color: map-get($color, primary);
}

CSS의 변수는 클라이언트에게 노출되지만 SCSS의 변수는 컴파일을 통해 CSS를 생성하기 때문에 변수는 CSS에 노출되지 않습니다.

SCSS에서는 산술연산자인 +, -, *, /, %를 모두 사용할 수 있습니다.
예외적으로 /연산자를 사용할 경우 변수는 상관이 없지만 상수를 사용할 경우 ( )로 감싸주어야 합니다.
또한 첫번째 인수에 단위를 입력해 주어야합니다.

item {
  width: (100px / 2);
  width: (100 / 2px);    // 오류발생
}