SassScript 데이터 타입과 연산 및 주요 기능

SassScript 는 CSS 의 한계를 극복하기 위해 도입된 확장 문법으로, 프로그래밍 언어와 유사한 연산, 변수, 함수 기능을 제공합니다.

---

1. 데이터 타입 (Data Types)

Sass 는 7가지의 주요 데이터 타입을 지원하며, type-of 함수를 통해 확인할 수 있습니다.

데이터 타입	설명	예시
숫자형	단위(px, em, %)를 포함하거나 포함하지 않는 숫자	1.2, 13, 10px
문자열	따옴표 유무와 상관없이 인식 ("", '', 혹은 없음)	"Lucida", 'serif', bold
컬러	색상 이름이나 16진수, RGB, RGBA 표현식	blue, #04a3f9, rgba(255,0,0,0.5)
Boolean	논리적 참과 거짓	true, false
Null	값이 없음 (컴파일 시 해당 룰셋은 무시됨)	null
List	공백 또는 콤마로 구분된 값의 집합	0 auto, Arial, sans-serif
Map	키-값 쌍으로 구성된 데이터 객체	(primary: #fff, margin: 10px)

---

2. 변수 (Variables)

변수는 $ 기호를 사용하여 선언하며, 코드의 재사용성을 높여줍니다.

2.1 변수 선언 및 사용

// 변수 선언
$font-size: 16px;
$primary-color: #333;

body {
  font-size: $font-size;
  color: $primary-color;
  
  // Property Nesting
  font: {
    family: Arial, sans-serif;
    weight: bold;
  }
}

2.2 변수의 유효 범위 (Scope)

• 전역 변수: 파일 최상위 레벨에서 선언된 변수.
• 지역 변수: 코드 블록 { } 내에서 선언된 변수.
• !global: 지역 변수를 전역 변수로 승격시킬 때 사용합니다.

---

3. 연산자 (Operators)

3.1 숫자 연산

산술 연산 시 왼쪽 피연산자의 단위를 기준으로 결과가 출력됩니다. 단, em 과 px 처럼 변환 불가능한 단위 간의 연산은 에러를 발생시킵니다.

주의: / 연산자는 다음 조건에서만 나눗셈으로 작동하며, 그 외에는 CSS 구분자로 인식됩니다.
1. 변수에 대해 사용될 때
2. 괄호 ( ) 내에서 사용될 때
3. 다른 연산의 일부로 포함될 때

3.2 컬러 및 문자열 연산

• 컬러: 각 RGB 성분별로 연산이 수행됩니다. (Alpha 값은 opacify, transparentize 함수 사용 권장)
• 문자열: + 연산자를 사용하여 연결 가능하며, 좌항의 따옴표 유무에 따라 결과 포맷이 결정됩니다.

---

4. 특수 기능

4.1 Interpolation: #{}

변수 값을 문자열 그대로 삽입합니다. 셀렉터 이름, 프로퍼티명, 혹은 연산을 피해야 하는 font 속성 등에 활용됩니다.

$name: alert;
$side: bottom;

// 셀렉터와 프로퍼티명에 적용
.#{$name} {
  border-#{$side}: 1px solid red;
  font: #{$font-size} / #{$line-height}; // 연산 방지
}

4.2 Ampersand (&)

부모 셀렉터를 참조할 때 사용합니다. 가상 요소, 가상 클래스, 혹은 부모를 포함하는 중첩 구조에서 유용합니다.

4.3 !default

변수에 값이 아직 할당되지 않은 경우에만 초기값을 설정합니다. 라이브러리나 테마 시스템의 기본값을 정의할 때 필수적으로 사용됩니다.

// 사용자 설정이 우선됨
$primary-conf: red;
$primary-conf: blue !default; // 이미 red가 있으므로 무시됨

---

Key Point: SassScript 는 변수, 데이터 타입, 연산 기능을 통해 CSS 를 프로그래밍 방식으로 제어하며, 특히 !default 와 #{} (인터폴레이션)은 효율적인 모듈화의 핵심입니다.