CSS Pro-Processor(전처리기) SASS, SCSS, LESS

CSS는 재사용 및 체계적인 코드를 작성하기 위한 복잡한 논리과 기능이 존재하지 않습니다.

CSS 전처리기는 이러한 바닐라 CSS의 기본기능을 확장하는데 사용되는 도구입니다.

변수,함수,믹스인,코드 중첩 및 상속 과 같은 복잡한 논리 구문을 사용해 몇가지 이름을 지정하여 바닐라 CSS를 강화하여 사용할 수 있습니다.

 

그러나 브라우저는 바닐라 CSS 코드만 이해할 수 있으며 CSS 전처리기 구문을 해석할 수 없습니다.

CSS 전처리기 구문은 네이티브 CSS 로 컴파일되어야 하며, 그 다음 브라우저에서 해석할 수 있습니다.

현재 가장 많이 사용되는 전처리기에는  Sass, LESS, Stylus 등이 있다

 

 

CSS 전처리기 사용의 장점

- 재사용성 : 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있다.

- 시간적 비용 감소 : 임의 함수 및 빌트인 함수로 개발 시간적 비용을 절약한다.

- 유지 관리 : 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이하다.

 

CSS 전처리기 사용의 단점

- 작업자가 개발적 요소를 이해해야 한다. 

 

Sass

Sass는 Syntactically Awesome Style Sheets의 약자로 세계에서 가장 인기있는 CSS 전처리기 일뿐 아니라 가장 오래된 전처리기 중 하나입니다.

 

Ruby 언어로 작성되었지만 Precompiler LibSass를 사용하면 Sass를 다른 언어로 구문분석하고 Ruby에서 분리할 수 있습니다.

Sass는 초보자를 위해 인터넷에서 사용할 수 있는 방대한 커뮤니티와 광범위한 학습 리소스를 보유하고 있습니다.

 

SCSS

SCSS 는 Sassy CSS로 Sass와 달리 들여쓰기를 기반으로 하지 않습니다.

.sass 확장자는 Sass 의 원래 구문으로 사용되나 SCSS 는 .scss 확장자를 사용합니다.

SCSS 에는 중괄호와 세미콜론이 존재합니다.

 

LESS

LESS는 Leaner Stylesheets 의 약자입니다. 

JavaScript로 작성되었으며 믹스인, 변수, 중첩 및 규칙 집합 루프를 사용하여 네이티브 바닐라 CSS의 기능을 확장하는 JavaScript 라이브러리입니다.

 

Stylus

Stylus는 Node.js 로 작성되었으며 Sass의 논리적인 부분과 LESS의 단순성에 크게 영향을 받았습니다.

매우 강력한 내장 기능으로 무거운 컴퓨팅 기능을 처리할 수 있다는 장점이 있습니다.

 

# 참고

https://www.lambdatest.com/blog/css-preprocessors-sass-vs-less-vs-stylus-with-examples/