SASS / SCSS
SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트
SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS
full-name으로 봤을 때 SASS, SCSS 둘 다 문법적으로 어썸한 CSS라는 뜻을 가지고 있다. SCSS의 경우 SASS보다 뒤에 나왔고(SASS 3 버전에서 SCSS가 생겨남) 약간의 문법 차이가 있지만 SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가진다. 큰 차이점은 SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만 SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분한다.
CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능을 가졌다. 그래서 SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기(preprocessor)의 역할을 한다.
SASS, SCSS 차이점
Sass는 좀 더 깔끔하고, SCSS는 기존의 CSS 작성 방식과 유사하다.
Sass 3 버전에서 좀 더 CSS에 호환될 수 있도록 도입된 것이 SCSS 문법이다. 그래서 SCSS를 쓰면 CSS를 쓰던 방식과 유사하게 Sass의 기능을 사용할 수 있다.
기존 Sass 구문은 들여쓰기 문법을 사용해야 했지만, 새로 나온 SCSS 구문은 대괄호와 세미콜론을 사용하고 있어서 좀 더 친숙하게 쓸 수 있다.
하지만 전처리기(preprocessor)가 내부에서 어떤 작업을 하는지는 알지 못한 채, 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에 의지하게 되었고, 그 결과 컴파일된 CSS의 용량은 어마어마하게 커지게 되었다.
CSS Module
컴포넌트를 스타일링 할 때 CSS Module 을 사용하면, CSS 클래스가 중첩되는 것을 방지할 수 있다.
CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 되는데, 기존 CSS파일을 만드는것 처럼 CSS파일을 만들 수 있다.
CSS Module을 사용하면 [filename]\_[classname]\_\_[hash] 형식의 고유한 클래스 이름을 자동으로 생성하고 매칭시켜주기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없어진다.
하지만 CSS Module 기존 CSS와 동일하게 용량이 커지는 문제를 해결하진 못했다.
CSS-in-JS
위의 문제를 해결한 것이 CSS-in-JS이다. Javascript 안에 CSS를 넣음으로써 해결했다.
CSS-in-JS에 대해서는 이전글에 정리한 내용이 있다.
CDD / CSS-in-JS (1)
CDD / CSS-in-JS (2)
