[개발상식] 19. Sass란, less란, Sass와 less비교

Sass

(Syntactically Awesome Style Sheet)

직역하면 구문적으로 꽤 괜찮은 스타일시트라는 말이 된다.

사전적 정의를 살펴보면 다음과 같이 기술하고 있다.

CSS 상위에 있는 meta-language로 CSS에 비해 간결하고 격식을 갖춘 CSS문법을 제공하며,

스타일 시트를 쉽게 관리할 수 있는 기능을 제공하는 것이다.

격식을 갖춘다는 말도 와닿지 않고 와닿는 말이라곤 찾아볼 수 없다.

Sass는 CSS를 만들어주는 언어로, 자바스크립트 처럼 특정 속성 값(color, margin, width)를 변수로 선언하여,

필요한 곳에 선언된 변수를 적용할 수 있고,

반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 편리한 기능을 갖고 있다,

Ruby로 만들어져 있으며, 만약 개발환경에 Window라면 따로 Ruby를 설치해야 한다.

(Mac에는 기본적으로 Ruby가 설치되어 있다.)

Ruby를 설치하고 나서는 gem을 통해 Sass를 설치하는 것이다.

less

자바스크립트 문법을 취하고 있으며, Node.js 엔진을 기반으로 구동된다.

Sass와는 달리 브라우저단에서도 동작하는 특징을 갖고 있다.

Sass와는 달리 less의 정보가 상대적으로 매우 적었다.

CSS에 비해서?

코드의 재사용

이름을 붙여놓은 스타일셋을 사용하고 싶은 곳에서 호출하여 사용(mixin 기능)

프로그래밍적 처리

조건분기, 반복처리 등을 이용

셀렉터 기술의 간략화

셀렉터의 부자관계를 네스트로 표현할 수 있다.

File Merge , CSS압축

여러개의 Sass 파일을 하나의 CSS파일로 합칠 수 있고 개행이나 indent, 공백 등을 삭제할 수 있다.

이로 인해, 파일 사이즈를 줄일 수 있고, HTTP Request를 줄일 수 있다. 

비교

Sass vs Less

less는 변수의 접두어로 @를 사용하고

Sass는 $를 사용한다.

중첩에 있어서는 같은 문법을 지원한다.

less와는 달리 sass에서는 css속성 이름도 중첩이 가능하다.

두 방식 모두 믹스인을 지원한다.

여기서 약간의 기능차이가 또 발생하는데,

Sass의 경우 속성 이름에도 변수를 사용할 수 있다는 장점이 있다.

SASS에서만 프로그래밍적 처리를 지원한다

Less에서만 이스케이프 기능을 제공한다.

유효하지 않은 코드가 포함되어 있을 경우, 해당 코드를 해석하지 않도록 만드는 방법으로 ~을 앞부분에 붙여준다.

https://baepower.wordpress.com/2012/07/31/1%EC%9E%A5-sass-%EA%B0%9C%EC%9A%94-1-2-sass%EB%A1%9C-%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EA%B2%83%EB%93%A4/

-..-