CSS 전처리기란?

CSS 전처리기?

CSS가 동작하기 전에 사용하는 기능 (웹에서 직접 동작하지 않으므로 표준CSS로 컴파일이 필요)

CSS 문법과 유사 하지만 변수, 함수, 상속 등의 Programmatically한 방식과 선택자의 중첩, 다양한 단위의 연산 등을 편리하게 작성 가능

불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

 

CSS 전처리기 모듈

CSS : Cascading Style Sheets

LESS : Leaner Style Sheets

SASS : Syntactically Awesome Style Sheets

SCSS : Sassy Cascading Style Sheets

 

SASS 와 SCSS 의 차이점

- SASS의 3버전에서 새롭게 등장한 언어 SCSS는 CSS와 완전히 호환되도록 새로운 구문을 도입한 CSS의 상위집합.

- 차이점은 {} 중괄호와 ; 세미콜론의 유무

 

SASS 문법 ({} 중괄호와 ; 세미콜론 無)

See the Pen Untitled by jominh (@thatBamm) on CodePen.

 

 

SCSS 문법 ({} 중괄호와 ; 세미콜론 有)

See the Pen Untitled by jominh (@thatBamm) on CodePen.