SASS, SCSS, LESS 비교(기본)

SASS, SCSS, LESS 비교

 

SASS, SCSS     VS    LESS

	SASS, SCSS	LESS
구축환경	Ruby 환경	JS 문법을 취하고 Node.js 기반
접두어	달러 $	@
변수 예시	$test	@test
대입 예시	$test : 10px	@test : 10px

 

SASS    VS   SCSS

*Sass는 css를 확장한 메타언어이고, 이는 SASS, SCSS라는 2가지 기법을 가지고 있다.

SASS기법이 먼저 나오고 SCSS기법이 연이어 나왔는데, SCSS기법을 더 많이 쓰는 추세라고 한다.

 

	SASS	SCSS
like 툴	ruby like (Ruby를 설치해야 SASS를 사용할 수 있다.)	css like
괄호, 세미콜론 사용	중괄호, 세미콜론 사용 x => 대신 indent를 활용	CSS와 거의 비슷
예시	$white : #fff .hoge     background-color : $white	$white : #fff; .hoge{    color : $white ; }
장점	중괄호 사용x => 짧은 코드	-css와 비슷함 -인터넷에 관련 자료가 많음
단점	-css와 달라서 적응이 어려울 가능성 -인터넷에 관련 자료가 적음	-입력할 코드가 많음 -프로젝트가 커질수록 가독성 저하 -@mixin, @include 등 입력할 것이 많음