CSS
전처리 도구이다.CSS
가 동작하기 전에 사용하는 기능으로 웹에서는 분명 CSS
가 동작하지만 CSS
의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다.SASS
문법이 기존의 CSS
문법보다 쉽고 더욱 더 강력한 기능을 가지고 있다.공식문서
SCSS
: 기존의CSS
와 호환이 되어 있어 사용이 용이하다.SASS
: 들여쓰기로 코드들을 구분한다.SCSS
는 표현(괄호,세미콜론) 이외에 기능은Sass
와 같다.- 유일하게 다른 내용은
Mixins
이다.
SASS
.list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px
SCSS
.list { width: 100px; float: left; li { color: red; background: url("./image.jpg"); &:last-child { margin-right: -10px; } } }
- 사용자의 실제 웹 브라우저에서 사용할 수 있는 문법은
CSS
이므로SASS
로 작성된 문법을CSS
문법으로 변환해주는 컴파일을 해줘야 한다.SCSS
(Sass
) :CSS Preprocessor
(CSS
전처리기) ⇒CSS
(변환 = 컴파일)
Sass
)으로 간편하게 줄여서 사용 가능CSS
로만 작성할때 보다 불편한 부분들을 조금 더 손쉽게 작성해서 웹에서 동작될 수 있도록 하기 위해서 SCSS
(Sass
)를 사용.