bootstrap sass 如何使用

bootstrap sass的使用方法：1、下載Ruby；2、從官網下載Sass；3、透過「@mixin」定義程式碼區塊；4、透過「@include」來使用即可。

本文操作環境：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同樣也支援參數<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div>Sass可以使用

@extend

來繼承一個類別<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div>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; 
}

（推薦：《

bootstrap教學

》）

以上是bootstrap sass 如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！