CSS Preprocessor 란?
HTML, CSS를 다루는 분이라면 한 번은 Sass에 대해 들어봤을 것이다.
Sass는 CSS 전(예비)처리기 이고, 보통 CSS Preprocessor 라고 부른다.
CSS가 동작하기 전에 사용하는 기능으로,
웹에서는 분명 CSS만 동작하지만 CSS의 불편함을 이런 확장 기능으로 편하게 사용할 수 있다.
사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.
어떻게 사용하나요?
웹에서는 CSS만 동작한다.
Sass, Less, Stylus 같은 전처리기는 직접 동작시킬 수 없다.
CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)한다.
단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)한다.
전처리기로 작성하고 CSS로 컴파일해서 동작시키는 방법이다.
컴파일은 어떻게 하나요?
전처리기 종류마다 방법이 조금씩 다르고 여러 방식이 있다.
보통의 경우 컴파일러(Compiler)가 필요한데,
우리는 이제 Sass(SCSS)를 알아볼 것이고 컴파일 방법은 다음 포스팅에서 살펴보자.
왜 Sass(SCSS)죠?
보통 언급되는 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있다.
문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능하다.
또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭하다.
Sass와 SCSS는 차이점은 뭔가요?
Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입이다.
더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다.
Sass:
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px
SCSS:
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분한다.
아래는 Mixins(‘믹스인’은 재사용 가능한 기능을 만드는 방식의 의미합니다) 예제이다.
두 가지 종류의 차이점을 한번 보자.
Sass는 단축 구문으로 사용한다.
:Sass
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
:SCSS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}Sass는 =와 + 기호로 Mixins 기능을 사용했고,
SCSS는 @mixin과 @include로 기능을 사용했다.
단순한 몇 가지를 제외하면 거의 차이가 없지만 복잡한 문장이 될 경우 여러 환경에 따른 장단점이 있을 수 있다.
Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔해지고,
SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다.
댓글