🥠 SASS란?
- CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기( CSS Preprocessor) 입니다.
- 기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다.
- 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다.
- 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다.
🥠 SASS 장점
- autoprefixer 를 제공한다.
- 코드중복을 줄일수 있다.
- 변수를 사용 할 수 있기 때문에 유지보수가 쉬워진다.
- @import, @include, @mixin, @extend 등 다양한 함수 및 변수를 제공한다
🥠 SASS compile
- ruby를 활용하여 compile - https://sass-lang.com/documentation/cli/ruby-sass
- 번들러를 활용한 compile - https://d2.naver.com/helloworld/5644368
- 에디터를 이용한 compile - vscode, brackets 등
🥠 SASS vs SCSS
Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.
Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분합니다.
- sass 문법은 들여쓰기로 유호 범위를 구분하기 때문에 협업을하거나 유지보수 측면에서 스페이스로 인한 오류를 범하기 쉽다.
- scss 문법은 css 문법과 거의 동일하며 sass의 장점을 내포하고 있어 누구나 쉽게 접근이 가능하고 활용하기 좋다.
--
SASS 참조 사이트
http://sass-lang.com/
