SassScript

숫자, 문자열, 색상, 목록, 맵 등 다양한 데이터 유형을 제공하며, 이를 변수에 담아 활용하고, 연산자를 이용해 연산할 수 있다. 끼워 넣기 ^{interpolation} 기법과 부모 스크립트 &도 Sass의 활용 범위를 넓히는 데 큰 역할을 한다.

SassScript 사용 범위

SassScript 표현식의 사용 범위는 직접 사용과 간접 사용으로 나뉜다. 이 글에서는 사용 범위를 정리한다. 자세한 활용법과 예시는 각 기능을 다루는 글에서 설명한다.

직접 사용

변수, 연산, 함수를 값으로 직접 사용한다. SassScript 표현식을 사용하는 일반적인 방법이다.

• 속성값
• 미디어 쿼리에서 미디어 속성 이름²
• 미디어 쿼리에서 미디어 속성값
• if(), @if, @while의 조건식의 값
• @each의 대상
• @for의 범위
• @debug의 값

간접 사용

꼭 끼워 넣기를 활용해야 변수, 연산, 함수를 사용할 수 있다. 이름이나 문자열 안에서 SassScript 표현식을 사용하고 싶은 경우에 이 방법을 사용한다. 예) #{$var}, #{$max-width / 2}, #{map-get($breakpoints, md)}

• 선택자
• 속성 이름
• 미디어 쿼리에서 미디어 타입
• @warn과 @error의 메시지 안에서
• 여러 줄 주석 내용 안에서 — 보러가기

SassScript 목차

SassScript는 다양한 기능과 문법을 가지고 있고, 설명할 내용과 예시도 많다. 각 부문을 다음과 같이 나누어 작성했다.

• 대화형 셸
• 식별자 이름
• 변수 $
• 변수와 !default 플래그
• 데이터 유형
• 연산
• 괄호의 활용
• 함수
• 끼워 넣기 #{}
• 부모 스크립트 &