本文操作環境：Windows7系統、bootstrap3、Dell G3電腦。
安裝
Sass是由Ruby編寫的，所以想使用Sass必須先下載Ruby，Ruby只是為Sass運行提供支持，不懂Ruby也不礙事
安裝好Ruby之後再從官網下載Sass，就可以使用了
##Sass用法
1、變數
Sass透過美元符號使用變數//Sass源码
$highlight-color: #000000;
.selected {
border: 1px solid $highlight-color;
}
//编译后的CSS
.selected {
border: 1px solid #000000;
}
2、巢狀##Sass的嵌套和Less相同直接寫在裡面就好了
3、程式碼重複使用@mixin @include @extend @function @importSass可以用
@mixin 來定義程式碼區塊然後用@include 來複用@mixin同樣也支援參數<pre class="brush:css;toolbar:false">//Sass源码
@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
}
button{
@include border-radius(5px);
}
//编译后的CSS
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}</pre>Sass可以使用
來繼承一個類別<pre class="brush:css;toolbar:false">//Sass源码
.block{
padding: 15px;
margin-bottom: 15px;
}
.block-primary{
@extend .block;
color: #00aff0;
}
//编译后的CSS
.block, .block-primary {
padding: 15px;
margin-bottom: 15px;
}
.block-primary {
color: #00aff0;
}</pre>Sass 也可以使用
來匯入外部檔案 可以使用@function 來定義函數4、Sass支援
@if @else if @else @for @while//Sass源码
@mixin add-background($color){
background: $color;
@if $color==#000000{
color: #666666;
}@else {
color: #ffffff;
}
}
.section-primary{
@include add-background(#ffffff);
}
//编译后的CSS
.section-primary {
background: #ffffff;
color: #ffffff;
}