這篇文章主要介紹了bootstrap sass的使用方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站營(yíng)銷、小程序App開(kāi)發(fā)等移動(dòng)開(kāi)發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為陽(yáng)光房等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開(kāi)發(fā)服務(wù)。

bootstrap sass的使用方法：首先下載Ruby；然后從官網(wǎng)下載Sass；接著用“@mixin”來(lái)定義代碼塊；最后用“@include”來(lái)復(fù)用即可。

安裝

Sass是由Ruby編寫(xiě)的，所以想使用Sass必須要先下載Ruby，Ruby只是為Sass運(yùn)行提供支持，不懂Ruby也不礙事

安裝好Ruby之后 再?gòu)墓倬W(wǎng)下載Sass，就可以使用了

Sass用法

1、變量

Sass通過(guò)美元符號(hào)使用變量

//Sass源碼
$highlight-color: #000000;
.selected {
  border: 1px solid $highlight-color;
}
//編譯后的CSS
.selected {
  border: 1px solid #000000; 
}

2、嵌套

Sass的嵌套和Less相同 直接寫(xiě)在里面就好了（推薦：《bootstrap教程》）

3、代碼重用@mixin @include @extend @function @import

Sass可以用@mixin 來(lái)定義代碼塊 然后用@include 來(lái)復(fù)用 @mixin同樣也支持參數(shù)

//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 來(lái)繼承一個(gè)類

//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來(lái)導(dǎo)入外部文件  可以使用@function 來(lái)定義函數(shù)

4、Sass支持分支和循環(huán)@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; 
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap sass的使用方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!