CSS는 수정이 지속적으로 발생하면 코드가 복잡해지면서 유지보수가 어려워 지는 단점이 있다. 이러한 CSS 한계를 보완 하기 위해 CSS 전처리기를 사용한다.
CSS 전처리기는 SASS, LESS, Stylus와 같은 도구들이 이있는데 각각 비슷하면서도 다른 구문과 기능들을 포함하고 있다. 연산, 중첩, 상속과 같은 기능들의 사용 할수 있어 CSS 구조를 가독성 있게 만들어주고 유지보수가 편리하도록 만들어 준다.
SASS(SCSS)
SCSS는 SASS 세번째 버전에서 추가되었는데 SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌다.
SASS vs SCSS
// SASS
.wrapper
width: 100px
height: 200px
.content
color: white
float: left//
SCSS
.wrapper{
width: 100px;
height: 200px; .content{
color: white;
float: left;
}
}
SASS의 유용한 기능으로 부모요소를 반복적으로 기술하지 않고 사용 할수 있다.
// CSS
.wrapper{
width: 100%;
height: 100%;
}
.wrapper div{
width: 500px;
height: 200px;
}
.wrapper div span{
background-color: blue;
}
// SCSS
.wrapper{
width: 100%;
height: 100%;
div{
width: 500px;
height: 200px;
span{
background-color: blue;
}
}
}
$ 변수
‘$’변수를 사용해서 공통된 속성을 재활용 할수 있다.
$font-color: red;
.content{
color: $font-color;
float:left;
.title{
color: $font-color;
font-size: 18px;
}
}
@ mixin
믹스인을 사용하면 공통된 속성의 묶음을 재활용 할수 있다.
@mixin box-style{
width: 100px;
height: 50px;
background-color: red;
}
.section{
position: absolute;
top: 0;
.box{
@include box-style;
}
}
@ import
하나의 파일로 모든 CSS를 관리하는 것은 가독성을 해치면서 유지보수에도 어려움이 있다. 임포트 기능을 활용하면 코드의 재활용, 유지보수에 도움이 된다.
@import 'header.scss'
@import 'header' // 확장자 생략 가능
@ if
조건문 사용이 가능하다.
// .scss
$num: two;
div {
@if $num == one {
color: blue;
}
@else if $num == two {
color: red;
} @else {
color: black;
}
}
// .css (..compile)
div{
color: red;
}
@ for
반복문 사용이 가능하다.
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}