Sass 문법 가이드

Sass 공식 참고문서는 Sass의 모든 기능¹과 문법을 예시와 함께 자세히 설명하고 있다. 하지만 함축적으로 표현하여 쉽게 이해가 안 되는 부분도 있고 내용 자체가 어려운 부분도 있다. 이 글 시리즈는 공식 참고문서를 바탕으로 개념과 문법을 설명한다. 예시가 없이 문장으로만 작성하여 이해하기 어려운 부분은 내용에 따라 목록으로 정리하거나 예시 코드를 함께 보여준다. 나아가 서로 연관된 내용은 링크로 연결하여 연결성을 높이고 새로운 내용도 추가해 원문보다 넓은 범위의 내용을 담고 있다.

용어

Sass 공식 참고문서의 영어 원어를 다음과 같이 한글로 표기한다. CSS와 자바스크립트에서 사용하는 익숙한 용어도 있고 처음 들어 본 낯선 용어도 있다. Sass에서 가지는 의미를 중심으로 설명한다.

CSS 규칙 ^rule과 규칙 집합 ^ruleset

CSS에서 선택자 ^selector와 속성 ^property을 감싼 중괄호 를 하나의 규칙이라 한다. 규칙 여러 개를 규칙 집합이라 한다.

플래그 ^flag

CSS의 !imortant나 Sass의 !optional을 플래그라고 한다. 플래그를 선언하면 의미에 맞춰 동작한다.

지시자 ^directive

Sass 컴파일러가 어떻게 처리할지 지시하는 구문이다.

Sass는 CSS 전처리기로 이름이 @로 시작하는 다양한 지시자를 제공한다.²

믹스인 ^mixin

믹스인은 재사용할 수 있는 코드 묶음이라고 보면 쉽다. 믹스인을 호출한 곳에 믹스인 내부에 작성한 CSS 규칙을 불러오기 때문에 반복해서 코드를 작성하는 것을 줄인다.

함수 ^function

Sass는 많은 내장 함수를 제공하며, 사용자 정의 함수를 정의할 수도 있다. Sass에서 함수는 무조건 값을 반환해야 한다.

인수 ^argument

믹스인이나 함수를 호출할 때 함께 넘기는 값이다.

끼워 넣기 ^{interpolation}

문자열 안에 직접 변수를 작성하여 그 값을 끼워 넣는 방법이다. 변수는 값으로 치환하여 문자열과 합쳐진다.³

식별자 ^identifier

변수 이름, 속성 이름 등 대상을 식별하는 이름을 뜻한다.