[TOC]
### 1.嵌套
~~~
div{
h1{
width:100px;
height:100px;
background:yellow;
//&表示h1
&:hover{
background:red;
}
}
}
~~~
~~~
//編譯后
div h1 {
width: 100px;
height: 100px;
background: yellow;
}
div h1:hover {
background: red;
}
~~~
### 2.變量
~~~
$bg:red;
$fontSize:12px;
~~~
### 3.mixin
* 1.使用@mixin定義代碼塊
* 2.使用@include引用代碼塊
~~~
$bg:red;
@mixin bg($bg){
background:$bg;
line-height:40px;
text-align: center;
}
.nav{
@include bg(yellow);
}
~~~
### 4.extend
~~~
.block{
width:100px;
height:100px;
}
.nav{
@extend .block;
}
~~~
### 5.loop
~~~
@mixin gen-col($n){
@if $n > 0 {
@include gen-col($n - 1);
.col-#{$n}{
width:100%/12*$n;
}
}
}
@include gen-col(12)
;
~~~
~~~
推薦使用
//sass之處for循環
@for $i from 1 through 12 {
.col-#{$i}{
width:100%/12*$i
}
}
~~~
### 6.import
可以將css拆分成不同的模塊,用import去加載對應的css
