1- @for

  1. @for $i from 1 through 12 {
  2. .col-#{$i}{
  3. width:$i/12*100%
  4. }
  5. }

2- @if-@else

  1. @mixin v-h($val:true) {
  2. @if $val {
  3. display: block;
  4. }@else{
  5. display: none;
  6. }
  7. }
  8. .v{
  9. @include v-h;
  10. }
  11. .h{
  12. @include v-h(false)
  13. }

3- @extend继承样式

  1. .three{
  2. @extend .two;
  3. background-color: red;
  4. }