Sass는 일종의 CSS 전처리기이다. 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 코드의 재사용성을 높여준다.
Sass설치
- ruby설치
윈도우만 아래 링크에서 ruby설치(mac과 linux는 ruby 기본적으로 설치되어있음)
http://rubyinstaller.org/downloads/- cmd창에서 ruby 버전확인
ruby --version
- 명령어로 sass 설치
gem install sass
variables
선언: $변수명: 속성값;
호출: $변수명// Sass $default-color: #f00; $default-border: 1px solid black; .head{ color: $default-color; border: $default-border; } .body{ color: blue; border: $default-border; }
// CSS .head{ color: #f00; border: 1px solid black; } .body{ color: blue; border: 1px solid black; }
nesting
한번에 관리하므로 코드의 유지보수가 편하다.
&로 부모선택자를 참조할 수 있다.// Sass .btn{ background-color: #f00; &:hover{ opacity: 0.5; } .text{ color: #fff; } &.select{ border: 2px solid black; } }
// CSS .btn{ background-color: #f00; } .btn:hover{ opacity: 0.5; } .btn .text{ color: #fff; } .btn.select{ border: 2px solid black; }
import
호출: @import ".scss 파일명"
@import "basic.scss" @import "basic2" //확장자 생략가능
mixin
선언: @mixin mixin명(인자){}
호출: @include mixin명(인수)@mixin btn-style($color, $width, $height){ background-color: $color; width: $width; height: $height; } blue-btn{ @include box-style(#00f, 100px, 50px); color: #f00; }
extend
호출: @extend 선택자명
.btn-style{ width: 100px; height: 50px; } .blue-btn{ @extend .btn-style; background-color: #00f; }