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