[CSS] Sass(SCSS)란 무엇인가?

Sass란 Syntactically Awesome Style Sheets의 약자로, CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다.

 

[Sass예시]

.example
        width: 100px
        li
           color: blue

 

[SCSS 예시]

.example {
        width: 100px;
        li {
           color: blue;
        }
     }

 

Sass와 SCSS의 차이점은 Sass는 중괄호와 세미콜론을 사용하지 않고 들여쓰기로 유효범위를 정하고, SCSS는 CSS와 비슷한 문법으로 중괄호와 세미콜론을 그대로 사용한다.

 

Sass(SCSS)는 웹에서 직접 동작할 수 없다. 어디까지나 최종에서는 표준 CSS로 동작해야 하며 따라서 컴파일 해야 한다.

 

 

CSS의 단점 

CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아지면 불편함이 많다.

1. 선택자를 만들때 매번 불필요한 부모 요소 선택자를 적어야 한다.

2. 함수가 없어서 규모가 큰 프로젝트의 경우 자동화 하기 어렵다.

3. 결국 중복되는 코드가 많아 코드가 길어져서 유지보수에 마이너스적인 요소가 된다.

 

Sass(SCSS)의 등장

Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고 개발 효율을 올리기 위해 등장한 CSS전처리기 언어 이다.

Sass는 CSS의 대체 언어가 아니라 CSS코드를 생산해내기 위한 일종의 도구이다.

 

장점

1. 변수의 사용

2. 조건문과 반복문

3. Import (모듈화)

4. Nesting (선택자 반복 작성 줄여주는 기능)

5. Mixin (함수 개념)

6. Extend/Inheritance  (확장/상속)