Sass

sass介紹

•    SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。
•    SASS的本質是一種幫助你簡化CSS工做流程的方式，幫助你更容易的維護和開發CSS內容。
    環境搭建及編譯指令
•    在 Windows 平臺下安裝 Ruby 須要先有 Ruby 安裝包，你們能夠到 Ruby 的官網（http://rubyinstaller.org/downloads）下載對應須要的 Ruby 版本。

•    Ruby 安裝文件下載好後，能夠按應用軟件安裝步驟進行安裝 Ruby。在安裝過程當中，我的建議將其安裝在 C 盤下，在安裝過程當中選擇第二個選項（不選中，就會出現編譯時找不到Ruby環境的狀況），以下圖所示：
 
•    Ruby 安裝完成後，在開始菜單中找到新安裝的 Ruby，並啓動 Ruby 的 Command 控制面板，以下圖所示： 
•    當你的電腦中安裝好 Ruby 以後，接下來就能夠安裝 Sass 了。一樣的在windows下安裝 Sass 有多種方法。但這幾種方法都是很是的簡單，只須要在你的命令終端輸入一行命令便可。

• 經過命令安裝 Sass

• 打開電腦的命令終端，輸入下面的命令：gem install sass • 提醒一下，在使用 Mac
  ，可能須要在上面的命令前加上"sudo"，才能正常安裝：

  sudo gem install sass •    若是不能正常安裝sass?  •    gem sources --remove https://rubygems.org/  •    gem sources -a

  https://ruby.taobao.org/[若是你係統不支持https,請將淘寶源更換成：gem sources -a
  http://gems.ruby-china.org ] • gem sources -l • gem install sass
  • 檢測Sass • sass -v • 升級sass版本的命令行爲 • gem update sass • 卸載（刪除）sass
  : gem uninstall sass • 基本用法 • sass提供四個編譯風格的選項： • nested :
  嵌套縮進的css代碼，它是默認值 • expanded:沒有縮進的、擴展的css代碼 • compact:簡潔格式的css代碼
  • compressed:壓縮後的css代碼

sass導入

•    Css自己包含一個指令@import,可是CSS中的@import每次執行都會發送一次新的請求都會消耗必定的資源

SASS中擴展了這個指令，會將包含的編譯成一個CSS文件，切割成小的部分（partials）包含進來進行處理。
Partials這樣的文件，命名規範是如下劃線開頭的，這樣的SCSS文件不會被編譯成CSS文件。
Partials是用來定義公共樣式或者組件的樣式的，專門用於被其餘的SCSS文件import進行使用的.

sass嵌套

•    Sass 中還提供了選擇器嵌套功能，但這也並不意味着你在 Sass 中的嵌套是無節制的，由於你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深，這每每是你們不肯意看到的一點。這個特性如今正被衆多開發者濫用。
•    選擇器嵌套爲樣式表的做者提供了一個經過局部選擇器相互嵌套實現全局選擇的方法，Sass 的嵌套分爲三種：
    •    選擇器嵌套
    •    屬性嵌套
    •    僞類嵌套(瞭解)
    •    選擇器嵌套

sass變量定義

• SASS中的變量，必須是$符號開頭，後面緊跟變量名，變量名稱和變量值之間要使用冒號：進行分隔（參考CSS屬性和值的設定語法），若是值後面加上[!default]就表示默認值。
引用變量的值，直接使用變量名稱，便可引用定義的變量的值。
• 普通變量：定義以後能夠在全局範圍內使用
• 默認變量：sass的默認變量須要在值的後面加上!default進行標識• 默認變量的覆蓋：在默認變量先後，從新聲明變量並賦值便可
• 默認變量是基於組件化開發的過程當中，進行優化處理的
• 特殊變量：通常狀況下，咱們定義的變量都是屬性值，能夠直接使用，可是若是變量做爲屬性或者其餘的特殊狀況下，必須使用#{$variable}的形式進行調用。
• #{$varialbe}就是取值的一種特殊形式，符合特殊用法。
•

sass判斷語句

• @if指令是SASS中的一個控制指令，用於在表達式知足條件(true)的時候輸出指定的樣式，在不知足條件（false）或者表達式爲null的狀況下輸出其餘的樣式
@if條件{

//當條件爲真時執行的樣式

}
一樣，也能夠經過@else if 和@else 指令結合，進行多條件的判斷
*

• sass數組/map（瞭解）

*
• list表示列表類型的值
在CSS中就是表示屬性的一串值
列表中的值可使用空格或者逗號分隔，如
• border:#ccc solid 1px;值就是列表
• font – family:Courier , 「Lucide Console」,monospace;值也是列表
• 列表中能夠包含其餘的列表，如：
• padding(10px 5px) (5px 5px);能夠用括號分開，編譯成css時會去掉這些括號
• map就是列表項目中帶名稱的列表
• $map : (key1 : value1,key2:value2,key3:value3)
• $var (key1:value1,key2:value2..):聲明一個Map
• length($map):獲取map中的元素對個數
• map-get($map,key):獲取$map中名稱爲key的值
• map-keys($map):獲取指定$map中全部的key
• map-values($map):獲取指定$map中全部的value
• map-has-key($map,key):判斷在$map中是否包含指定的key
• map-merge($map1,$map2):將$map1和$map2合併在一塊兒
• map-remove($map,key):將指定名稱的key從$map中移除

• sass循環語句*

• @for指令在SASS中用於重複處理一組指令
• 有兩種表現形式
• @for $var from <開始值> through < 結束值>
• @for $var from <start> to <end>
• to和throuch都是表示一個區間，惟一的區別就是中止循環的地方不同。$var能夠是任意一個變量名稱如$i，<start>和<end>是SASS表達式而且必須是整數
• @each在SASS中主要被用來進行列表或者映射數據的循環
• 主要表示形式：@each $var in <list>
• $var能夠是任意變量名稱，<list>是SASS表達式而且必須是list.
• sass-mixin函數(宏)
• sass中能夠經過@mixin聲明混合，能夠傳遞參數，參數名稱以$開始，多個參數之間使用逗號分隔，@mixin的混合代碼塊由@include來調用.
• sass-function介紹
• 函數的功能主要是數據的運算，SASS中能夠將一些值交給函數進行處理，具體的處理方式由定義的函數具體的設計肯定。
• @function 函數名稱（參數列表）{

//數據處理

}

sass繼承

• SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：
　　.class1 {
　　　　border: 1px solid #ddd;
　　}
class2要繼承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

<--------------------------------------end---------------------------------------------->