[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);
```
