sass的基本使用

最近在項目中利用到了css預處理器（sass），而以前沒接觸過的本博主出於好奇心，就在業餘的時間裏搜了一些資料來看看，看完後以爲sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主以爲比較有趣並且比較用得上的知識點）

- 1.sass的配置：

sass使用範圍很大，如在vue的單組件文件中能夠做爲樣式模板調用，react中也可使用sass，而至於在vue，react中如何配置，本文不打算詳細闡述，有興趣的讀者能夠自行查閱。
本文全部的例子都是在webstorm中編譯，而webstorm能夠自行編譯sass，具體能夠查看該連接：
webstorm配置sass
- 2.sass的概念：

定義：sass是css的一種預處理器，文件後綴名爲.scss，能夠用webpack中的sass-loader來轉成css樣式。
ps：由於sass是基於ruby編寫的，因此須要安裝ruby後才能下載sass，才能夠用；

- 3.sass的基本使用方法：

A）基本用法：

- 變量

語法：$變量名 ： 變量值 ;
用途：在sass中，能夠定義一些項目中經常使用的樣式變量，如font-size，color，background-color等；
eg：

$a:12px;
      .box1{font-size:$a;}
      .box2{font-size:$a + 2px}

ps：sass中的所定義的變量不單隻利用在樣式值上，還能拼接字符串，動態改變屬性的名稱；
用法：#{$變量}
eg：

$a:left;
      $b:#888;
      .box1{border-#{$a}-color : $b}

- 計算功能

在項目中，若是用到sass，定義變量時都會定義一些經常使用的值做爲sass的變量，但若是在寫樣式時如font-size的值在經常使用變量中沒有定義，那麼能夠利用sass變量的計算能力（加減乘除）

- 嵌套

定義：若幾個節點存在存在親屬關係，則在sass上能夠用嵌套的方式來代替原css中的後代選擇器；若是在嵌套中想調用父元素，則能夠用&代替；

- 媒體查詢

在sass中@media能夠不用寫在外層，直接嵌套在對應的選擇器裏面寫響應式；
eg：

未改變以前：

改變以後：

B）複用：

- 繼承

定義：在sass中容許一個選擇器繼承另外一個選擇器的所有樣式；
語法： 選擇器 { @extend 另外一個選擇器 }

eg:

- mixin

定義：在sass中，能夠利用@mixin來定義一個複用塊，並且該複用塊還能引入參數和參數的默認值。
語法：

定義複用塊  @mixin name （param1：default1 ，param2：default2，...）{   }
 引用複用塊  選擇器{
                    @include name (val1,val2,...)
                  }

eg:
（mixin.scss文件）

（調用文件）

• 插入文件

這個知識點在css中就已經存在，就是將css模塊化處理，而後利用@import來調用；上面的例子就是利用了這個知識點，通常狀況下，在項目開發過程當中，也推薦這種作法。

C）高級用法：

• 條件用法

定義：sass中能夠像js同樣採用條件判斷語句選擇性採用合適的樣式塊；
語法：

@if （confident） { 樣式塊1 }
  @else { 樣式塊2 }

eg:

注意：若是mixin中，有些參數有默認值，有些參數沒有，則沒有默認值的參數要放在參數列表的前面。

• 循環用法

定義：sass中不單單能夠用條件語句，還能夠調用循環語句；sass中的循環語句有@for 和@while，用法基本一致。
語法： @for $i from start to end { 樣式 } ，@while confident { 樣式 }
注意：@for 是從start到end但不包含end；
eg：

• 自定義函數

定義：在sass中還能自定義函數，但必需要有返回值，並且要在調用前定義該函數。
語法：

@function name （） { return  }

eg：

sass的內容遠不止這些，若是看完本博客後也有興趣繼續深刻學習sass，能夠去看一下官方文檔：
sass中文文檔
官方文檔