在SCSS中简单使用循环语句for/while/each

style.scss

// for loop
@for $space from 1 through 12 {
  .pt-#{$space} {
    padding-top: 10px * $space;
  }
  .pb-#{$space} {
    padding-bottom: 10px * $space;
  }

  $width: percentage(1 / $space);
  .col-#{$space} {
    width: $width;
  }
}

// while loop
$num: 0;

@while( $num <= 12) {
  $width: percentage(1 / $num);
  .col-#{$num} {
    width: $width;
  }

  $num: $num + 1;
}

// each loop

$white: #fff;
$black: #000;
$red: #f00;
$primary: #ccc;
$secondary: #333;

$colors: (
        'white': $white,
        'black': $black,
        'red': $red,
        'primary': $primary,
        'secondary': $secondary
);

@each $color, $hex in $colors {
  .text-#{$color} {
    color: $hex;
  }

  .background-#{$color} {
    background-color: $hex;
  }
}