[TOC]
## &可以作為選擇器的一部分
```
.main{
&-content:{
}
}
//--- --- ---
>>> .main-content{}
```
## 有相同命名空間的屬性可以使用嵌套
```
div{
font:{
size:10px;
weight:bold;
}
}
//--- --- ---
>>> div{font-size:10px;font-weight:bold}
div{
font: 15px {
size:10px;
weight:bold;
}
}
//--- --- ---
div{font:15px;font-size:10px;font-weight:bold}
```
## 插值
### 插值屬性
```
$side:top;
border-#{$side}-color:red;
```
### 插值選擇器
```
$theme: ".dark";
#{$theme} div {
color: black
}
```
>[danger] ### 如果傳入的是字符串，插值語句輸出的最終都是不帶引號的字符串
### 多行注釋也可以使用插值
```
/* 當前版本: #{$version} */
```
## !global
會將局部變量申明為全局
```
$red : red !global;
```
## 運算
在進行加減乘除時，建議使用統一單位，否則就需記住哪些單位是可以轉換，哪些是不可以轉換的，稍不注意，Sass就會報錯。
### 關于'/'
由于原生的CSS中的斜杠(`/`)是有用途的（比如定義圓角的不同半徑時，border-radius：10px/20px，表示水平半徑為10px，垂直半徑為20px），所以在Sass中使用時要注意，只有下面三種情況才會被視為除法運算:
- 如果值被圓括號包裹：(20px / 10px)
- 如果值是算數表達的一部分：(10px+20px / 10px)
- 如果值的一部分是變量或函數的返回值：$width / 10
如果你想顯示的讓斜杠（/）不做除法運算，只需要使用插值語句(#{})
```
div{#{$font-size} / #{$line-height};}
```
### 關于'+'
可以像javascript一樣 用`+`來拼接字符串
```
div{cursor: e + -resize}
//---
>>> div{cursor: e-resize}
```
## 流程控制
### @if
```
div{
@if 1>2 {
color:red;
}@else if 3>2 {
color: blue;
} @else {
color: black;
}
}
```
### for...through...
```
@for $var from start through end {}
//---
@for $i from 1 through 3{
.large-#{$i} { font-size: 10px * $i ;}
}
```
### for...to...
和`through`相比不包含end
### @each
#### sass中的數組
Sass中的數組，是通過空格或則逗號分隔的一系列的值，比如1 2 3 4或1,2,3,4
還可以多維數組，比如1 2,3 4表示包含1 2與3 4兩個數組，還可以這樣(1 2)(3 4)
#### 遍歷數組
```
@each $var in <list>
//---
```
<list>是一系列以逗號分隔的值列表（數組）：
```
//user,nav,person --> [user,nav,person]
@each $icon in user,nav,person{
#{$icon}-icon{
background-image: url('/images/#{$icon}.png');
}
}
```
#### 多維數組與遍歷
```
@each $var1,$var2 in ($value,$value),($value,$value)
```
栗子
```
@each $font,$size in (large-1,10px),(large-2,20px){
#{$font}{
font-size:$size
}
}
//---
>>>
.large-1 {font-size:10px}
.large-2 {font-size:20px}
```
#### 鍵值對形式的數組遍歷
```
@each $key,$value in {key:value,key:value}
```
```
@each $selector,$size in {div: 10px,p: 20px}{
#{$selector}{
font-size: $size;
}
}
//---
>>>
div{font-size:10px}
p{font-size:20px}
```
#### 列表中嵌套map
注意這種情況的循環遍歷，計算只有1項，也必須帶上`,`
```
$list:(k1:v1,k2:v2),(k1:v3,k2:v4); //就算只有一項也必須帶上','
@each item in list{
@each k,v in item{
}
}
```
### @while
```
$i: 6;
@while $i > 0{
.item-#{$i} {width: 2em * $i; }
$i : $i - 2;
}
```
## @mixin
### @mixin的不確定參數[多余參數]
#### 作為形參
```
@mixin box-shadow($shadows...){
box-shadow: $shadows;
}
div{
@include box-shadow(0 0 3px black, 0 0 5px red);
}
```
#### 作為實參
```
@mixin colors ($text,$background,$border){
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary{
@include colors($values...)
}
```
### 不定序傳參
不定序傳參可以讓你忽略形參的順序，不必記住它們
```
@mixin blue-theme($background,$color){
background: $background;
color:$color;
}
```
一般我們是這樣調用的
```
div{@include blue-theme{red,white}}
```
但我們也可以忽略傳參的順序，傳參時以鍵值對的形式傳參：
```
div{@include blue-theme{$color: white,$background :red}}
```
## @extend
```
.large{
font-size: 20px;
font-weight: bold;
}
.main{
@extend .large;
background: red;
}
>>>
.large,.main{font-size:20px;font-weight:bold;}
.main{background:red}
```
### `@extend `實現的繼承是繼承所有
其實就是把被繼承的類名換成自己
```
.large {
font-size: 20px;
font-weight: bold;
}
.large.blue{
color:
}
.mian{
@extend .large;
background: red;
}
>>>
.large,.main{font-size:20px;font-weight:bold}
.large.blue,.blue.main{color:blue}
.main{background:red}
```
## sass 中的數據類型
### number
```
numbers(13,10px)
```
### 文本字符和沒有引號的文本字符
```
"foo",'bar',bar
```
### 顏色
```
blue,#ffffff,rgba(255,0,0,0.5)
```
### 布爾值
```
true,false
```
### 空
```
null
```
### 數值列表
```
通過逗號或則空格分開(1.5em 1em 0 1em,Helvetica,Arial,sans-serif)
```
```
映射鍵值對(key1:value1,key2,value2)
```
## sass中關于引號需要注意的幾點
若果一個引號字符串和一個沒有引號的字符串相加（有引號的字符串在左邊），結果是一個有引號的字符串。同樣，如果一個沒引號的字符串和一個有引號的字符串相加（沒有引號的字符串在左邊），結果是沒有引號的。例如
```
p:before{
content:"Foo" + Bar;
font-family:sans- + "serif";
}
>>>轉譯后
>>>
p:before{
content:"Foo Bar";
font-family:sans-serif;
}
// 在字符串文本中，通過${}樣式可以添加動態值給字符串
p:before{
content:"I ate #{5+10} pies!";
}
// 轉換為CSS
p:before {
content:"I ate 15 pies!";
}
```
### 在編譯 CSS 文件時不會改變其類型(有無引號)。只有一種情況例外，使用#{}插值語句(interpolation)時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令中引用選擇器。
```
@mixin firefox-message($selector){
body.firefox #{$selector}:before{
content:"Hi,Firefox users!";
}
}
@include firefox-message(".header")
>>>編譯后
>>>
body.firefox .header:before{
content:"Hi,Firefox users";
}
```
## ！defualt
```
sass的默認變量僅需要在值后面加上!default
Sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式很簡單，只需要在默認變量之前重新聲明下變量即可。
比如：
$baseLineHeight : 2;
$baseLineHeight : 1.5 !default;
body {
line-height : $baseLineHeight;
}
編譯后結果就是：
body {
line-height : 2;
}
```
## 常用方法
### index($list,$item)
```
$index:index($list,$item); //找到list中item這一項的索引，索引從1開始
```
### map-get($map,$key)
```
$value:map-get($map,$key); //找到map中key值為$key的$value
```
### length($list)
```
length($list)：返回一個列表的長度值；
```
### nth($list,$n)
```
nth($list, $n)：返回一個列表中指定的某個標簽值
```
### join($list1, $list2, [$separator])
```
join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表；
```
### append($list1, $val, [$separator])
```
append($list1, $val, [$separator])：將某個值放在列表的最后；
```
### zip($lists…)
```
zip($lists…)：將幾個列表結合成一個多維的列表；
```
### percentage(num1/num2)
將數字轉換成百分比
## 三元
### 注意：并不帶@
必須有變量來接收
```
if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
```
