Bootstrap Sass使用

簡介

Sass相比Less 功能更加強大 使用起來也相對復雜 同樣也可以用koala(見上篇)來編譯.

 

安裝

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 @import

 Sass可以用@mixin 來定義代碼塊 然后用@include 來復用 @mixin同樣也支持參數

//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; 
}

 

Sass可以使用@extend 來繼承一個類

//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; 
}

 

Sass 還可以使用@import來導入外部文件  可以使用@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; 
}