CSS의 단점
CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다.
예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다.
프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 주구장창 해야한다.
이 밖의 CSS의 단점을 열거하면 다음과 같다.
- 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
- function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
- 결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.
Sass(SCSS)의 등장
반면 Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.
CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다.
CSS 전처리기(Preprocessor) 언어 란?
전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.
Sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는게 아니다.
웹은 CSS밖에 모르기 때문에 우선 전처리기 언어 문법으로 작성(코딩)하고, CSS로 컴파일해서 웹으로 동작시키는 것이다. (자바스크립트와 타입스크립트 관계라고 봐도 무방하다.)
정리하자면, 전처리기 언어 즉, Sass는 CSS의 대체 언어가 아니다. Sass는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차인 것이다.
Sass(SCSS)의 장점
CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import (모듈화)
- Nesting (선택자 반복 작성 줄여주는 기능)
- Mixin (함수 개념)
- Extend/Inheritance (확장/상속)
선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.
Sass(SCSS)의 단점
전처리기를 위한 도구 필요
컴파일 시간 소요
사용하는 방법이 두가지인데,
1. 해당컴포넌트 레벨에서 scss 파일을 같이 만들어서 작업
2. styles 폴더 내에 생성 > next.config.js 라는 파일 안에 sass compiler 설정!
