#### @for 循環 ~~~ @for $i from 1 to 13{ .col-#{$i}{ width: 100%/12*$i; } } @media(min-width:768px) and (max-width:992px){ @for $i from 1 to 13{ .col-sm-#{$i}{ width: 100%/12*$i; } } } ~~~ * * * * * #### @import 引入其他css @import "base.css"; * * * * * #### 嵌套 ~~~ div{ p{ color: yellow; &:hover{ color: green; } } &:hover{ color: aliceblue; } } ~~~ * * * * * //可以做定制化的傳參 //下面默認值為100px；可以自由改變，通過$w,$h可以改變元素 //定義公共的css樣式 #### @mixin ~~~ @mixin wh($w:100px,$h:100px){ width: $w; height:$h; } .one{ @include wh; background: red; } .two{ @include wh(200px,200px); background:yellow; } ~~~ * * * * * #### @extend實現繼承 .head{ width: 100px; height: 100px; background: #333; } .foot{ @extend .head; } * * * * * #### 能定義變量 $bg: #ff2d51; $fontColor: #333; $m-font:14px; body{ background: $bg; color: $fontColor; font-size: $m-font; background-color: yellow; }