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
参考: