## 变量 $
## 嵌套 &
## 导入 @import "";
## 判断
### @if
```scss
// 语法：
@if expression { //CSS codes are written here }
// 示例：
p{
@if 10 + 10 == 20 { border: 1px dotted; }
@if 7 < 2 { border: 2px solid; }
@if null { border: 3px double; }
}
// 输出：
p {
border: 1px dotted;
}
```
## 函数
### 混合器@mixin 使用@include调用
```scss
// 示例1：
// block得有宽度margin左右为auto才能居中
@mixin center-block {
margin-left: auto;
margin-right: auto;
}
#header{
width:1000px;
@include center-block;
}
.gallery{
width:600px;
@include center-block;
}
// 输出：
#header {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.gallery {
width: 600px;
margin-left: auto;
margin-right: auto;
}
```
```scss
// 示例2：
$lte7:true !default;//是否兼容ie6,7
@mixin inline-block {
display: inline-block;
@if $lte7 {
*display: inline;*zoom:1;
}
}
// 不兼容情况
$lte7:false;
@import 'mixin';
.inline-block{
@include inline-block;
}
// 输出：
.inline-block{
display:inline-block;
}
// 兼容情况
$lte7:true;
@import 'mixin';
.inline-block{
@include inline-block;
}
// 输出：
.inline-block{
display:inline-block;
*display: inline;*zoom:1;
}
```
```scss
// 示例3：
@mixin float($float:left) {
float: $float;
}
// 输出：
.fl{
@include float;
}
.fr{
@include float(right);
}
```
```scss
// 示例4：
@mixin header{
#header{
@content;
}
}
@include header{
width:1000px;
height:200px;
.logo{
width:200px;
}
}
// 输出：
#header {
width: 1000px;
height: 200px;
}
#header .logo {
width: 200px;
}
```
### 继承 占位选择器% 使用@extend调用
```scss
// 示例：
%center-block {
height:60px;
}
#header{
width:1000px;
@extend %center-block;
}
.gallery{
width:600px;
@extend %center-block;
}
// 输出：
#header, .gallery {
height:60px;
}
#header {
width: 1000px;
}
.gallery {
width: 600px;
}
```
### @function 使用，直接调用函数名传参
```scss
// 示例：
@function fontSize($size:12){
@return $size / 16 * 1rem;
}
div{
font-size:fontSize(32)
}
// 输出：
div{
font-size:2rem
}
```
#### 内置函数：
##### rgb 第一种跟css3一样
```scss
// 分为两种：rgba($red, $green, $blue, $alpha)和rgba($color, $alpha)
rgba(#102030, 0.5) // rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) // rgba(0, 0, 255, 0.2)
```
##### ie-hex-str 这个函数将一个颜色格式化成ie滤镜使用，在做css3使用滤镜兼容的时候用得上
```scss
// ie-hex-str($color)
ie-hex-str(#abc) // #FFAABBCC
ie-hex-str(#3322BB) // #FF3322BB
ie-hex-str(rgba(0, 255, 0, 0.5)) // #8000FF00
```
##### darken 第一个参数是颜色，第二参数是百分数介于0%-100%，表示将某个颜色变暗多少个百分比。
```scss
// darken(color,amount)
darken(hsl(25, 100%, 80%), 30%) // hsl(25, 100%, 50%)
darken(#800, 20%) // #200
```
##### lighten 第一个参数是颜色，第二参数是百分数介于0%-100%，表示将某个颜色变亮多少个百分比。
```scss
// lighten(color,amount)
lighten(hsl(0, 0%, 0%), 30%) // hsl(0, 0, 30)
lighten(#800, 20%) // #e00
```
##### percentage 将一个没有单位的数字转成百分比形式
```scss
// lighten(color,amount)
percentage(0.2) // 20%
percentage(100px / 50px) // 200%
```
##### length 返回一个列表的长度
```scss
// length($list)
length(10px) // 1
length(#514721 #FFF6BF #FFD324) // 3
```
##### nth 返回列表里面第n个位置的值
```scss
//nth(list,n);
nth(10px 20px 30px, 1) // 10px
nth((Helvetica, Arial, sans-serif), 3) // sans-serif
```
##### unit 得到这个数的单位
```scss
// unit($number)
unit(100) // ""
unit(100px) // "px"
unit(3em) // "em"
unit(10px * 5em) // "em*px"
unit(10px * 5em / 30cm / 1rem) // "em*px/cm*rem"
```
##### unitless 返回这个数是否没有单位
```scss
// unitless($number)
unitless(100) // true
unitless(100px) // false
```
##### 三目判断 第一个表示条件，第二个表示条件为真的值，第三个表示为假的值
```scss
// if(condition,if-true, $if-false)
if(true, 1px, 2px) // 1px
if(false, 1px, 2px) // 2px
```
## 循环
### @for
```scss
// 语法：
// 第一种
@for $i from <start> through <end> // 包含end
// 第二种
@for $i from <start> to <end> // 不包含end
```
``` scss
// 示例：
@for $i from 1 through 3{
.width#{$i} {
width: $i * 10px;
}
}
// 输出：
.width1 {
width: 10px;
}
.width2 {
width: 20px;
}
.width3 {
width: 30px;
}
```
### @while
```scss
// 示例：
$num: 12;
@while $num < 18 {
.f-#{$num} {
font-size: #{$num}px;
}
$num: $num + 2;
}
// 输出：
.f-12 {
font-size: 12px;
}
.f-14 {
font-size: 14px;
}
.f-16 {
font-size: 16px;
}
```
### @each
```scss
// 语法：
@each $i in <list>
```
```scss
// 示例：
$list: 5, 10, 15, 20, 25;
@each $i in $list {
.p-#{$i}{
padding: #{$i}px;
}
}
// 输出：
.p-5 {
padding: 5px;
}
.p-10 {
padding: 10px;
}
.p-15 {
padding: 15px;
}
.p-20 {
padding: 20px;
}
.p-25 {
padding: 25px;
}
```
