Sass는 참 멋진 CSS 전처리기이지만 Sass 공식 참고문서는 아주 조금 덜 멋지므로 만든 설명서입니다. 문장을 풀어내고, 서로 연결하고, 내용을 덧붙여서 꼼꼼하고 친절하게 설명합니다.
Sass 공식 참고문서(새창)는 Sass의 모든 기능1과 문법을 예시와 함께 자세히 설명하고 있습니다. 하지만 함축적으로 표현하여 쉽게 이해가 안 되는 부분도 있고 내용 자체가 어려운 부분도 있습니다. 이 글 시리즈는 공식 참고문서를 바탕으로 딱딱한 문장을 풀어서 설명합니다. 예시가 없이 문장으로만 작성하여 이해하기 어려운 부분은 내용에 따라 목록으로 정리하거나 예시 코드를 함께 보여줍니다. 나아가 서로 연관된 내용은 링크로 연결하여 연결성을 높이고 새로운 내용도 추가해 원문보다 넓은 범위의 내용을 담고 있습니다.
용어
Sass 공식 참고문서의 영어 원어를 다음과 같이 한글로 표기합니다. CSS와 자바스크립트에서 사용하는 익숙한 용어도 있고 처음 들어 본 낯선 용어도 있습니다. Sass에서 가지는 의미를 중심으로 설명합니다.
- CSS 규칙 rule과 규칙 집합 ruleset
- CSS에서 선택자 selector와 속성 property을 감싼 중괄호 를 하나의 규칙이라 합니다. 규칙 여러 개를 규칙 집합이라 합니다.
- 플래그 flag
- CSS의
!imortant나 Sass의!optional을 플래그라고 합니다. 플래그를 선언하면 의미에 맞춰 동작합니다. - 지시자 directive
- Sass 컴파일러가 어떻게 처리할지 지시하는 구문입니다.
- Sass는 CSS 전처리기로 이름이
@로 시작하는 다양한 지시자를 제공합니다.2 - 믹스인 mixin
- 믹스인은 재사용할 수 있는 코드 묶음이라고 보면 쉽습니다. 믹스인을 호출한 곳에 믹스인 내부에 작성한 CSS 규칙을 불러오기 때문에 반복해서 코드를 작성하는 것을 줄여줍니다.
- 함수 function
- Sass는 많은 내장 함수를 제공하며, 사용자 정의 함수를 정의할 수도 있습니다. Sass에서 함수는 무조건 값을 반환해야 합니다.
- 인수 argument
- 믹스인이나 함수를 호출할 때 함께 넘기는 값입니다.
- 끼워 넣기 interpolation
- 문자열 안에 직접 변수를 작성하여 그 값을 끼워 넣는 방법입니다. 변수는 값으로 치환하여 문자열과 합쳐집니다.3
- 식별자 identifier
- 변수 이름, 속성 이름 등 대상을 식별하는 이름을 뜻합니다.