Sass는 SassScript라는 확장 기능 모음을 제공합니다. 변수, 연산, 함수는 SassScript를 대표하는 기능입니다.1
숫자, 문자열, 색상, 목록, 맵 등 다양한 데이터 유형을 제공하며, 이를 변수에 담아 활용하고, 연산자를 이용해 연산할 수 있습니다.
끼워 넣기 interpolation 기법과 부모 스크립트 &도 Sass의 활용 범위를 넓히는 데 큰 역할을 합니다.
SassScript 사용 범위
SassScript를 사용하는 활용 범위를 크게 두 가지로 나누어 정리해봤습니다. 참 다양한 곳에 표현식을 사용할 수 있군요. 자세한 활용법과 예시는 각 부분의 페이지에서 다시 볼 수 있으니, 여기에선 큰 맥락을 살펴보는 차원에서 봐주시길 바랍니다.
직접 사용
변수, 연산, 함수를 값으로 직접 사용합니다. SassScript 표현식을 사용하는 일반적인 방법입니다.
- 속성값
- 미디어 쿼리에서 미디어 속성 이름2
- 미디어 쿼리에서 미디어 속성값
if(),@if,@while의 조건식의 값@each의 대상@for의 범위@debug의 값
간접 사용
꼭 끼워 넣기를 활용해야 변수, 연산, 함수를 사용할 수 있습니다.
이름이나 문자열 안에서 SassScript 표현식을 사용하고 싶은 경우에 이 방법을 사용합니다.
예) #{$var}, #{$max-width / 2}, #{map-get($breakpoints, md)}
- 선택자
- 속성 이름
- 미디어 쿼리에서 미디어 타입
@warn과@error의 메시지 안에서- 여러 줄 주석 내용 안에서 — 보러가기
SassScript 목차
SassScript는 다양한 기능과 문법을 가지고 있고, 설명할 내용과 예시도 많습니다. 각 부문을 다음과 같이 나누어 작성하였습니다.
- 대화형 셸
- 식별자 이름
- 변수
$ - 변수와
!default플래그 - 데이터 유형
- 연산
- 괄호의 활용
- 함수
- 끼워 넣기
#{} - 부모 스크립트
&