01 variables

CSS의 값을 변수로 저장해서 사용할수 있다.

//변수명은 $ 와 영문으로 시작한다.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
//사용은 변수명을 속성값에 작성한다.
  font: 100% $font-stack;
  color: $primary-color;
}

02 calc

css의 calc()를 사용할수 있다

$width: calc(400px + 10%);

.sidebar {
  width: $width;
  padding-left: calc($width / 4);
}

03 mixin

속성은 같은데 값이 다를때 하나의 코드블록으로 정의해서 재사용할수 있는것이 믹스인

//선언 @mixin 사용자정의명 (매개변수){실행문}
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

//호출  @include 사용자정의명;
.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}