## sass 1. @mixin定義公共的css ``` @mixin wh($w:100px, $h:100px){ width: $w; height: $h; } .one { @include wh; background: red; } .two { @include wh(200px, 200px); background: yellow; } ``` 2. @extend實現繼承 ``` .head { width: 100px; height: 100px; color: red; } .foot { @extend .head; } ``` 3. for循環快速生成柵格布局 ``` @media (min-width:992px){ @for $i from 1 to 13 { .col-md-#{$i}{ width:100%/12*$i; } } } @media (min-width: 768px) and (max-width: 992) { @for $i from 1 to 13 { .col-sm-#{$i}{ width: 100%/12*$i; } } } @media (max-width: 768px){ @for $i from 1 to 13 { .col-xs-#{$i}{ width: 100%/12*$i; } } } ``` 4. 引入外部css的方式 ``` @import "base.css"; //引入css的絕對路徑 @import "base.scss"; //直接將編譯好的'base.css'寫入