Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor 로서,
복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라,
코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.
( CSS pre-processor 란? : CSS 를 확장하는 스크립팅 언어로서, 컴
파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다 )
쉽게 말해 지금껏 반복해야 했던 작업들을
보다 알아보기 쉽고, 편리하고, 간단하게 작업을 할 수 있도록 도와주는 녀석이라고
생각하시면 됩니다.
우선 SASS에는 .SASS와 .SCSS 라는 두가지가 있습니다.
이 두녀석은 문법에서 차이가 있는데요!
자세히 알아보겟습니다.
Sass 가 처음 릴리즈 되었을 때, 주 문법은 CSS와 많이 달랐습니다.
괄호 { } 대신 들여쓰기 (indentation) 을 사용하였으며
세미콜론 ; 을 사용하지 않고 단축 연산자를 사용하였습니다.
대략 다음과 같은 형태이지요.
|
=myclass // = means @ mixin
font-size: 12px
p
+myclass // + means @include |
그 시절, 일부 개발자는 이 새로운 문법에 익숙하지 않아서,
Sass 버전 3 이상부터는 주 문법이 .scss 로 변경되었습니다.
SCSS 는 CSS 의 상위집합으로서, CSS와 동일한 문법으로 SASS 의 특별한 기능들이 추가되어있습니다.
다음으로 Sass에선 무엇을 할 수 있는지 알아볼까요?
Sass에서 제공하는 기능은 이렇습니다.
1. Variable (변수)
2. Math Operators (수학 연산자)
3. Built-in Functions (내장함수)
4. Nesting (중첩)
5. Import (불러오기)
6. Extend (상속)
7. Mixin (믹스인)
8. Function (함수)
이렇게만 보면 자바스크립트나 php와 같이 다른 언어로만 보일거 같지만
CSS의 형태는 그대로 가져가고 다른 언어와 같은 기능들을 이용할수 있어
작업하는데에 이해도 쉽고 굉장히 편리합니다.
