搞定Sass只須要15分鐘

1、安裝及編譯

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby,安裝過程直接下一步到底。打開cmd安裝sass和compass

gem install sass
gem install compass
複製代碼

編譯單個文件和整個文件夾的命令以下[ ]爲可選--watch爲監聽文件變化--style爲編譯模式有nested|compact|compressed|expanded四個選項，默認爲nested。

/單文件編譯命令。把 input.scss編譯成output.css
sass input.scss:output.css [--watch] [--style nested|compact|compressed|expanded]
/編譯整個文件夾：sass文件夾下的scss文件會編譯到css文件夾下相同文件名的css文件
sass  sass:css [--watch] ...
複製代碼

須要注意的是在編譯的過程當中文件須要使用絕對路徑。以編譯整個目錄爲例四種編譯模式的結果以下：
1.nested
sass C:\Users\panx\Desktop\project\sass-demo\sass:C:\Users\panx\Desktop\project\sass-demo\css --watch --style nested

2.compact

3.compressed

4.expanded

2、語法

2.1 變量定義及使用

變量必須以$開頭，定義一個變量及使用以下所示

2.2 嵌套及調用父選擇器

嵌套可讓咱們少些一些代碼，調用父選擇器用&符號，&表明上層全部選擇器的組合

屬性嵌套

2.3 mixin混入

mixin和js中的mixin有點相似，在sass中用mixin定義一個基本的樣式快，而後在須要使用的地方用@include name引入，如下是語法及使用，參數必須以$開頭

語法
@mixin name (參數1，參數2...){
    
}
複製代碼

2.4 @extend繼承

繼承的樣式會以羣組選擇器的形式顯示出來

2.5 @import與partials 導入與分區

這個功能用來導入其餘sass文件，在sass中如下劃線開頭的文件是不會被編譯的，以下圖所示我在Sass文件夾下新建了一個_base.scss不會編譯到css/_base.css.用@import指令導入的時候不須要下劃線和擴展名

2.5 數據類型及運算

在cmd中輸入sass -i 進入用戶交互界面用type-of來檢測數據類型，咱們能夠看到在sass中的數據類型有number(寬高等，可包含單位),string,color,list（border,margin,padding的非縮寫）等，

2.5.1 數字類型

數字類型支持加減乘除，可帶單位，但兩個數字都帶單位相乘結果會比較詭異（以下圖），兩個帶單位的數字相除單位會抵消，兩個數相除要加括號以下所示：

數字還支持一些函數如abs,round,ceil,floor,percentage,min,max等

2.5.2 字符串類型

咱們看一下sass中字符串函數，下圖我定義了一個$greeting:'Hello'的變量

2.5.3 顏色函數

$base-color:#fff;
//調整顏色的色相，單位爲度可省略
adjust-hue($base-color,137[deg])
//lighten/darken調整顏色的明度和黯度
.container{
    background-color:darken($base-color,30%);
    color:lighten($base-color,50%);
}
//saturate/desaturate增長或下降顏色的純度及飽和度使用方式和darken/lighten一致
// opacify/transparentize增長或減小顏色的不透明度,即改變rgba中a的值，以下圖所示
複製代碼

2.5.4 列表函數

//求列表裏面的長度
length(5px 10px) ==>2
length(5px 10px 0)==>3
//取列表裏面的第幾個數
nth(5px 10px,1)==>5px
nth(5px 10px,2)==>10px
//算列表裏面某個項的索引
index(1px solid red,solid)==>2
//附加和鏈接
append(5px 10px,5px)==>5px 10px 5px
join(5px 10px,5px 0)==>(5px 10px 5px 0)

複製代碼

2.5.4 map及其函數

//map語法
$map:(key1:val1,key2:val2...)
//實例
$colors:(light:#fff,dark:#000)
//map相關函數
length($colors)==>2
map-get($colors,dark)=>#000
map-keys($colors)==>('light','dark')
map-values($colors)==>(#fff,#000)
map-has-key($colors,light)==>true
//合併兩個map
map-merge($colors,(gray:#bbb))==>(light:#fff,dark:#000,gray:#bbb)
//移除項目
map-remove($colors,dark,gray)==>(light:#fff)

複製代碼

3、指令

3.1 插值interpolation

這個功能頗有用，跟es6的模板字符串相似，只是sass裏面用的是#{}.具體如圖

3.2 控制指令

sass中的控制指令都有@開頭，有@if,@for,@each,@while

3.2.1 @if語法及用法

@if 條件{
    
}

複製代碼

3.2.2 @for語法及用法

//to不包含結束值，through包含結束值
@for $var from <開始值> through/to <結束值>{
    
}
複製代碼

3.2.3 @each語法及用法

//@each語法用來循環一個列表
    @each $var in $list{
        
    }
複製代碼

3.2.4 @while語法及用法

@while 條件{
    
}
複製代碼

3.2.5 @function語法及用法

@function name (參數1，參數2){
    
}
複製代碼

3.2.6 @warn @error警告與錯誤

$colors:(light:#fff,dark:#000);
@function get-color($key){
  @if not map-has-key($colors, $key){
    @warn '在$colors裏面沒有找到#{ $key}這個key';
   // @error '在$colors裏面沒有找到#{ $key}這個key';
  }
  @return map-get($colors,$key );
}

body {
  background-color: get-color(dark);
}
複製代碼