sass quick start

install

choco install sass

tip:首先須要安裝好chocolatey

preprocessing

sass input.scss output.css  

sass --watch input.scss output.css

sass --watch app/sass:public/stylesheets  // directory seperating by colon

basic usage

• variables

$font18:18px;

.font{
  font-size:$font18;
}
// 字符串中用 #{}
$dir:bottom;
.border {
  border-#{$dir}:1px solid gray;
}

• nesting

<div class="block">
  <div class="block_elemenet">this is a title
    <div class="block_element-modifier">modifier</div>
  </div>
</div>

.block {
  .block_element {
    .block_element--modifier {
    }
  }
}

• Import

//  "_reset.scss"  

@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

• mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

• @extend

.class1 {
}
.class2 {
  @extend .class1;
}

• operators

// 可使用運算符
.class {
  width: 600px / 960px * 100%;
}

• functions

@function half($size) {
  @return $size * 0.5;
}
.block {
  width: half(5px);
}

參考：

• sass basics
• 阮一峯：sass用法指南