[공지] SCSS (= SCSS + CSS) - CSS Preprocessor (전처리기)

※ 규모가 큰 CSS 프로젝트 작업하실 분만 배우세요. 

CSS Preprocessor 종류

 

SASS・SCSS (= SASS + CSS)

https://sass-lang.com/

차이점	SASS	SCSS ★	CSS
{} 기호	사용 X	사용 O	사용 O
; 기호	사용 X	사용 O	사용 O
: 뒤 공백	필요 O	필요 X	필요 X
mixin 정의	= 기호	@mixin	존재 X
mixin 호출	+ 기호	@include	존재 X
확장자	sass	scss	css

 

※ SASS

1. {} 기호 사용 X. 

2. ; 기호 사용 X. 

3. : 뒤의 공백 필요 O.

4. mixin에 = + 사용.

5. sass 확장자 사용.

 

※ SCSS 

1. {} 기호 사용 O. 

2.  ; 기호 사용 O. 

3. : 뒤의 공백 필요 X.

4. mixin에 @mixin, @include 사용.

5. scss 확장자 사용.

 

---

 

LESS

http://lesscss.org/

 

---

 

STYLUS

https://stylus-lang.com/

 

https://heropy.blog/2018/01/31/sass/