Sass란

Sass는 일종의 CSS 전처리기이다. 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 코드의 재사용성을 높여준다.

Sass설치

  1. ruby설치
    윈도우만 아래 링크에서 ruby설치(mac과 linux는 ruby 기본적으로 설치되어있음)
    http://rubyinstaller.org/downloads/
  2. cmd창에서 ruby 버전확인
    ruby --version
  3. 명령어로 sass 설치
    gem install sass

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;
}