출처 : https://poiemaweb.com/sass-script

1. 데이터 타입

• 숫자형
• 문자열
• 컬러
• boolean
• null (값이 null이면 트랜스파일링되지 않음)
• list (공백, 콤마로 구분)
• map (ex) key1: value1, key2: value2) // map-get 함수를 사용하여 원하는 값 추출

$foundation-palette: (
  primary: #111111,
  mars: #111111,
  saturn: #111111,
  naptune: #111111,
);

.mars {
  color: map-get($foundation-palette, mars);
}

2. 변수

• 문자열, 숫자 ,컬러 등을 사전에 변수에 저장하고 사용할 수 있음
• 변수명은 $로 시작

3. 변수의 Scope

• 코드 블록 내에서 선언된 변수는 지역변수가 됨
• 지역변수의 유효범위 : 자신이 속한 블록 + 하위 코드 블록

4-1. 숫자 연산자

• +, -, *, /, %, ==, !=
• 이 때, 상대적인 값을 갖는 단위의 연산은 동일한 단위를 갖는 값과의 연산만이 유효함
  ex) %, em, rem, vh, vw, vmin, vmax
• 따라서, CSS3의 calc 함수를 사용하면 이런 문제를 해결할 수 있음

#foo {
	width: calc(25% - 5px);
}

• / 연산자를 위한 조건
  - 변수에 대해 사용
  • 괄호 내에서 사용
  • 다른 연산의 일부로서 사용 (다른 연산과 혼용)

p {
  // font와 border-radius의 '/'는 CSS문법에 맞는 표현이므로 연산되지 않는다.
  font: italic bold 12px/30px Georgia, serif;
  // 타원형 둥근 모서리
  border-radius: 10px 20px/20px;
  /*
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 10px 20px;
  border-bottom-left-radius: 20px;
  */

  $width: 1000px;

  width: $width / 2;            // 변수에 대해 사용 →　width: 500px;
  height: (500px / 2);          // 괄호 내에서 사용 →　height: 250px;
  margin-left: 5px + 8px / 2px; // 다른 연산의 일부로서 사용 →　margin-left: 9px;
}

6. interpolation: #{}

• 변수의 값을 문자열 그대로 삽입함
• 인터폴레이션에 의해 삽입된 문자열은 연산의 대상으로 취급되지 않음
• 변수는 프로퍼티 값으로만 사용할 수 있으나, #{}을 사용하면
  프로퍼티값은 물론 셀렉터와 프로퍼티명에도 사용할 수 있음