sass quick start

install

choco install sass  

tip: you first need to install the 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

reference:

• sass basics
• Ruan Yifeng: sass Usage Guidelines