CSS Preprocessor (CSS 예비 처리기)
라고 불리는 문법으로
compiler가 compile 과정에서 css로 변환해준다.
대표적으로 CSS PreProcessor에 Less
, Sass(SCSS)
, Stylus
가 있다.
SCSS는 SASS ver.3 에서 등장한 개념으로 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든,
Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}
@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
는 선택자의 유효범위를 들여쓰기
로 구분하고, SCSS
는 {}
로 범위를 구분한다.앞서 언급했듯 반드시 compile 과정을 통해 SASS(SCSS) => .css 로 변환해주어야한다.
이때 Sass compiler를 추가로 설치하는 것이 부담이고 싫을 수 있다. 이를 방지하고자 web(SassMeister)상에서 바로 변환이 가능하다.
npm install -g node-sass
로 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리다.$ node-sass [옵션] <입력파일경로> [출력파일경로]
// 예시
$ node-sass scss/main.scss public/main.css
[]
는 선택사항)$ node-sass scss/main.scss public/main.css dist/style.css
$ node-sass --watch scss/main.scss public/main.css
$변수이름: 속성값;
으로 정의할 수 있다.$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
.list {
$w: 100px;
$h: 50px;
li {
width: $w;
height: $h;
}
@at-root .box {
width: $w;
height: $h;
}
}
.list li {
width: 100px;
height: 50px;
}
.box {
width: 100px;
height: 50px;
}
.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
bottom: 40px;
right: 30px;
};
}
!global
플래그를 사용하면 스코프를 전역을 바꿀 수 있다.$color: #000;
.box1 {
$color: #111 !global; // #111
background: $color;
}
.box2 {
background: $color; // #111
}
.box3 {
$color: #222; // #222
background: $color;
}
$color-primary: red;
.box {
$color-primary: blue !default;
background: $color-primary; // red
}
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;
프로젝트가 매우 커지면 .css
파일이 많아지는데 이를 모두 컨파일하면 시간이 매우 오래걸린다.
그래서 Sass는 Partials 기능을 지원하는데 파일 이름 앞에 _
를 붙여서 @import
로 가져오면 컴파일 시 ~.css
파일로 컴파일하지 않는다.