[CSS] CSS 확장언어, Sass(SCSS), LESS, Stylus

    - CSS Extension Language

 

* Stylus
http://stylus-lang.com/
https://github.com/stylus/stylus - 9,992
- v0.54.5 , 2016/04


https://trends.google.com/trends/explore?cat=31&date=all&q=Sass,LESS,stylus,SCSS


* 컴파일 된 내용 보기
http://stylus-lang.com/try.html


stylus-lang.com/try/stylus.min.js
stylus(src).render()


//===========
* LESS
https://github.com/less/less.js - 16,079
- v3.9.0 , 2018/11
 The dynamic stylesheet language
  - 컴파일 하지 않고 바로 확인 가능


//========================================
* Sass (Syntactically Awesome Style Sheets)
https://github.com/sass/sass - 12,020
- proposal.module-system.draft-6 , 2019/06


* SCSS (Sassy CSS) : Sass의 버전 3에 등장한 문법
CSS 문법과 호환


//=====================================
Sass와 SCSS는 차이점
https://heropy.blog/2018/01/31/sass/
Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.