[HTML/CSS] CSS Pre-processor

⚙️ CSS Pre-processor(전처리기)

CSS 전처리기는 특별한 syntax를 사용해 CSS 파일을 생성하는 프로그램이다.

이는 기존 있었던 CSS의 불편함/문제점을 해결하기 위해 생겨났다.

💡 CSS 전처리기 특징

1) Style Sheets를 분할해서 관리할 수 있다.

2) 상속으로 코드 구조화를 통한 유지보수에 유리하다.

3) 공통 요소 항목을 변수 or 함수로 대체하여 사용 할 수 있다.

4) 기존 CSS 보다 많은 기능을 제공한다.

💥 CSS 전처리기 문제점

CSS 전처리기를 사용한다고 무조건 좋은 것은 아니다.

기본적으로 웹은 표준 CSS 파일만 동작을 하게 되어있다. 즉, CSS 전처리기는 웹에서 직접 동작이 불가능하다.

그러므로, CSS 전처리기는 표준 CSS 파일로 컴파일을 통해 웹에서 동작하게 한다는 불편함이 있다.

이는 전처리기를 위한 도구가 필요하며 재컴파일시 추가적인 시간이 소모된다.

🔢 CSS 전처리기 종류

CSS 전처리기 종류로는 SASS/SCSS, Stylus, Less 등이 있다.

📝 SASS/SCSS

SASS(Syntactically Awesome Style Sheets) / SCSS(Sassy CSS)

SCSS는 SASS의 3버전으로 2006년부터 시작한 가장 오래된 CSS 확장 언어다.

1) nesting 기법

nesting 기법을 활용해서 코드 길이를 줄이고 반복되는 부모요소 선택자 사용을 줄일 수 있다.

2) @import

@import를 사용해서 다른 SASS/SCSS 파일 사용이 가능하다.

3) 접두어

SASS/SCSS는 $를 변수의 접두어로 사용한다.

4) 연산자

• 연산은 모두 px 단위로 계산한다. 다른 단위의 계산은 calc() 함수를 사용한다.

	width: 100px- 60px;
	width: calc(100% - 10rem);

• +(덧셈) 연산자를 사용한 # 색상 값 연산이 가능하다.

	$white-color: #444444 + #444444; => #888888

• 피연산자 형에 맞춰 연산을 한다.

	$str1: hello + "world"; => hello world
    $str2: "hello" + world; => "hello world"

5) @mixin & @include

@mixin은 재사용할 스타일을 정의할 때 사용한다.

@include는 정의된 스타일을 호출할 때 사용한다.

📄 LESS

LESS(Lenear Style Sheets)

LESS 역시 nesting 기법을 지원하고 연산자를 지원한다.

@mixin, @include의 기능을 제공하지만 추가적으로 명시하지 않고 사용할 수 있다.

변수의 접두어는 @를 사용한다.

JS 기반으로 node.js 환경에서 구동된다.

📜 Stylus

nesting 기법을 지원 않고, 변수 접두어를 따로 사용하지 않는다.

Stylus 역시 @mixin, @include의 기능을 제공하지만 추가적으로 명시하지 않고 사용할 수 있다.

마찬가지로 JS 기반으로 node.js 환경에서 구동된다.

	$white-color = #fff
    color: white-color

❗SASS/SCSS vs LESS vs Stylus

1. SASS/SCSS는 CSS 구조와 유사하고 {}, ;을 사용해 코드가 분리되어 가독성이 좋다.
하지만 컴파일 과정이 필요해 추가적인 단계가 필요하다.
(이전 SASS/SCSS는 Ruby 환경에서 구동이 되어 느리다는 단점이 있었는데, 현재는 node-sass가 나오면서 성능이 좋아졌다.)

2. LESS나 Stylus의 경우 @mixin과 같은 기능을 SASS/SCSS 따로 명시하지 않는다. 그래서 개인적으로 기능을 명시한 SASS/SCSS가 코드 길이는 좀 더 길지만 친화적이고 명확하다고 생각한다.