CSS預處理語言——SASS

什麼是sass？

• sass是一種CSS預處理器，其基本思想是，經過編程語言來爲CSS增長編程的特性。除sass以外還有less，可是因爲sass功能更爲強大、框架生態更爲成熟、應用更爲普遍、且擁有更穩定強大的團隊維護，因此如今更多時候會選擇sass。
• 在SASS3中引入了新的語法——SCSS，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能

爲何要用sass？

• CSS沒有成熟的語法，僅僅是一個標記語言而非編程語言，且在開發中須要書寫大量重複的選擇器。
• 沒有變量和樣式複用機制，使得邏輯相關的屬性值須要以字面量的形式重複輸出，致使後期維護十分困難。
• 使用CSS預處理器，提供CSS確實的樣式層複用機制，減小代碼冗餘，提升可維護性，提升開發效率。

• 可是CSS簡單的語法也擁有簡便、能夠隨時使用和調試的優勢，SASS使開發中多了一個環節，調試也更加麻煩，且易形成後代選擇器的濫用。所以實際工做中應仔細衡量取捨。

sass的使用

第一步，天然是安裝

1. 首先須要下載ruby，sass是基於ruby的。安裝ruby後在cmd中查看ruby版本(ruby -v,注意失敗時能夠查看環境變量是否成功配置.)
2. 而後經過 gem install sass 安裝sass,sass -v查看是否安裝成功.

sass的監聽操做

• cmd命令sass --watch scss文件:css文件 或者 sass --watch 文件夾:文件夾
• 在開發工具中通常也會有相關插件

編寫sass

• sass編譯過程當中會產生一個.map文件,這個文件是css文件和scss文件之間的一個關聯,若是存在map文件,在F12中css樣式的地址會指向scss文件,不然指向css文件.

• sass的語法:

變量

• 聲明變量用$聲明,使用時${變量}

運算

• 加減乘都與js中相同
• 除法比較特殊,由於在CSS的語法中有用到除法符號/
• 在計算式中有變量時、被()包裹時、在運算表達式中時這三種狀況/纔會被認爲是除法符號,進行除法運算.
• • 顏色也能夠用於計算,將顏色轉化爲RGB數值進行計算,若是有值計算結果超過了255,會直接取255.

lists數組

• 聲明:$lists:1 2 3;$lists: 1 2 ,3 4; $lists:(1 2 )(3 4 )
• 方法:
  1. nth($list,num)能夠訪問數組中的某一項.
  2. join($list1,$list2)將數組串到一塊兒.
  3. append($list,hello)給數組添加新值.
  4. @each $item in $list{} 遍歷數組

maps對象

• 聲明:$maps:(key:value,key:value)
• 方法:map-get($map,$key)

流程控制

• @if 條件{}
• @for $i start to/through end

import

• 用於引入其餘css文件:@import "地址"

函數

• @function fn(參數){ return 需返回的結果 }

extend繼承

• 能夠繼承extend過來的屬性

混合指令

• @mixin name{}
• 調用時用 @include name

編譯sass 三種渠道.cmd命令、koala軟件、開發工具插件

* sass文件支持多種編譯方式
    - nested：嵌套縮進的css代碼，它是默認值
    - expanded：沒有縮進的、擴展的css代碼
    - compact：簡潔格式的css代碼
    - compressed：壓縮後的css代碼
1. cmd方式:編寫好scss文件以後,在命令行輸入`sass 文件名.scss 文件名.css`,就能把scss文件編譯爲css
2. 軟件方式編譯（Koala)
    - [軟件地址](https://github.com/oklai/koala/releases/)
    - 下載安裝好軟件後把scss 文件導入軟件後便可執行編譯;
3. 開發工具插件,這個就因插件而異了.
複製代碼

編寫完畢，引入編譯後生成的css文件便可