Sass란?
Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 복잡해지고 유지 보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend/Inheritance
CSS와 비교하여 Sass는 아래와 같은 장점이 있다.
- CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
- 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화 할 수 있다.
- CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지 보수 편의성을 큰 폭으로 향상 시킬 수 있다.
- 그 외에도, 함수와 연산자를 사용할 수 있으며, 다양한 문법들이 존재한다.
설치
브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.sass) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다. 따라서 Sass 환경의 설치가 필요하다.
다음 명령을 사용해 Sass를 전역으로 설치한다.
$ npm install -g node-sass
트랜스파일링
$ node-sass [sass 파일이름 혹은 경로] [컴파일된 sass 를 담을 css 파일이름 혹은 경로] (옵션) -o -w-o : 컴파일을 콘솔창으로 확인이 가능하다(터미널 콘솔창에 컴파일된 코드가 뜬다)
-w : 해당되는 sass 를 자동적으로 컴파일 한다(변경 후 저장 하면 알아서 컴파일 되어 style.css 에 저장된다)
기본 문법
Variables (변수)
변수 선언 시에는 $ 를 사용하며, 변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, lists, maps 가 있다.
변수를 특정 selector 안에서 선언하면 해당 selector 에서만 접근이 가능하고, 이것을 전역 변수로 사용하고 싶으면 !global 플래그를 사용한다.
Sass
$main_color: #000
body
color: $main_color
.local_var
$main_color: #333
color: $main_color
.global_var
$main_color: #666 !global
color: $main_color
.global_flag
color: $main_color
CSS
body {
color: #000;
}
.local_var {
color: #333;
}
.global_var {
color: #666;
}
.global_flag {
color: #666;
}
Arithmetic Operators (산술 연산자)
산술 연산자 사용이 가능하다. ( +, -, /, %, ==, != )
주의할 점은 +, - 연산자 사용 시에는 단위를 통일시켜야 한다.
Sass
.box
width: 200px / 600px * 100%
CSS
.box {
width: 33.3333333333%;
}
Nesting (중첩)
중첩 기능은 CSS를 마치 HTML의 트리 구조처럼 계층이 있는 모양으로 사용할 수 있게 해준다. 하지만 코드 중첩이 너무 깊게 되면 유지 보수가 어려워지므로 코드 중첩 시 4레벨보다 깊게 들어가지 않도록 유의해야한다. & 를 사용해 부모 선택자를 레퍼런스 할 수 있으며, @at-root를 사용하면 중첩에서 벗어날 수 있다.
Sass
.container
a
color: #666
&:hover
text-decoration: underline
color: #000
&:visited
color: #eee
@at-root div
background-color: #eee
CSS
.container a {
color: #666;
}
.container a:hover {
text-decoration: underline;
color: #000;
}
.container a:visited {
color: #eee;
}
div {
background-color: #eee;
}
Import (불러오기)
Sass 파일 내에서 @import 지시자를 사용해 특정 .sass 파일을 불러올 수 있다. 파일명을 작성할 때에는 확장자를 붙이지 않아도 된다. 참고로, import 기능만 사용하기 위한 sass 파일은 _(underscore) 으로 시작하는 파일명을 붙이면 css로 컴파일되지 않는다. 이것을 partial 기능 이라고 한다. 주로 컴파일 되지 않는 변수나 믹스인 등을 모아놓는 용도로 사용되는 것 같다.
Sass
@import layout
Extend (상속)
CSS를 작성하다 보면 중복되는 코드를 작성하게 되는 경우가 많다. 상속은 이런 번거로움을 덜어주는 기능으로 특정 선택자를 @extend 지시자를 통해 상속 받을 수 있다.
또한, 선택자가 상속에만 필요할 경우 Placeholder 선택자 % 를 사용하면 해당 선택자는 상속은 가능하지만 컴파일 되지 않는다.
Sass
box
border: 1px solid #eee
padding: 10px
display: block
.alert_box
@extend .box
background-color: #666
color: #fff
$notice_box
color: #999
font-weight: bold
.success_box
@extend .box
@extend $notice_box
background-color: green
.error_box
@extend .box
@extend $notice_box
background-color: red
CSS
.box, .error_box, .success_box, .alert_box {
border: 1px solid #eee;
padding: 10px;
display: block;
}
.alert_box {
background-color: #666;
color: #fff;
}
.error_box, .success_box {
color: #999;
font-weight: bold;
}
.success_box {
background-color: green;
}
.error_box {
background-color: red;
}
Mixin (믹스인)
mixin은 상속과 비슷하지만 argument(인수)를 받을 수 있다는 점에서 차이가 있다. mixin을 선언할 때는 @mixin 지시자를 사용하며, mixin을 사용할 때는 @include 지시자를 사용한다. mixin의 인수에는 : 을 사용하여 기본값을 지정할 수 있고, 문자열을 그대로 출력해주는 #{ } 표현을 이용해 손쉽게 미디어 쿼리를 작성할 수도 있다. 또한 mixin 안에 @content 지시자를 사용하면 해당 부분에 @include 지시자의 스타일 블럭을 복제할 수 있다.
Sass
@mixin highlight($color, $size: 14px)
color: $color
font-size: $size
.heading_one
@include highlight(red, 20px)
.heading_two
@include highlight(blue)
@mixin button($queryString)
@media #$queryString
width: 100%
&:hover,
&:active,
&:focus
@content
.button
width: 300px
color: blue
@include button("(max-width: 767px)")
color: red
CSS
.heading_one {
color: red;
font-size: 20px;
}
.heading_two {
color: blue;
font-size: 14px;
}
.button {
width: 300px;
color: blue;
}
@media (max-width: 767px) {
.button {
width: 100%;
}
.button:hover,
.button:active,
.button:focus {
color: red;
}
}
Function (함수)
내장 함수 외에 @function을 사용하여 임의로 함수를 만들어 쓸 수도 있다. mixin과 다른 점은 mixin이 style markup을 반환하지만, function은 @return 지시자를 사용하여 값을 반환한다는 것이다.
Sass
@function card-width($col_num, $container_width)
@return ($container_width / $col_num)
@function calc-width($col_num, $margin)
@return calc((100% / #{$col_num}) - #{$margin})
.card
width: card-width(4, 1000px)
.calc_card
width: calc-width(6, 10px)
CSS
.card {
width: 250px;
}
.calc_card {
width: calc((100% / 6) - 10px);
}