Sass(Syntactically Awesome StyleSheets)
CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)
사용 이유
프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점 해결
SASS 사용법
브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다.
$ npm install -g sass
SASS vs SCSS
SASS 표기법은 보다 코딩을 간략화할 수 있는 장점이 있지만 CSS 친화적인 SCSS 표기법를 사용하는 경우가 더 많으므로 본 Post에서는 SCSS 표기법을 기준으로 한다.
1) 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여줍니다.
2) 더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰입니다.
3) CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높입니다.
4) 여러 줄 쓰기 지원: Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않습니다.
ex)
- SASS
#main p {
color: #00ff00;
width: 97%;
}- SCSS
#main p
color: #00ff00
width: 97%SCSS 문법
1) 변수 사용가능 : 변수명은 $로 시작
2) Nesting 기능 : 중첩해서 사용 가능
3) @import @export 지시어 사용 가능
4) Mixin : 공통적으로 쓰이는 css 속성들을 묶어서 재사용이 가능
5) 커스텀 함수 사용 : 함수 정의는 @function ,리턴값은 @return
6) 흐름제어 : 분기문 / 반복문에 @를 붙인다.
출처
