由于我个人习惯,写HTML的时候不喜欢写一个类名,然后再去CSS里面写好对应的样式,大部人的选择是将重复的CSS抽离,写到全局中,这样就可以直接应用.但是还是很麻烦,那么,有没有更好的方法呢?

平时我写的html示例:

<!-- margin-top:20px -->
<div class="mt20"></div>
<!-- padding-left:20px -->
<div class="pl20"></div>
<!-- ...... -->

.mt{
    margin-top:20px
}
.pl{
    padding-left:20px
}
......

由此可见,写起来实在很麻烦,于是我就想到了SCSS的for循环,可以通过循环来生成这些类名和对应的css属性呀!!!

然后就有了这个SCSS文件

// TODO: 这里用于生成 margin 与 padding 各个方向的边距 1-100px的css

// 定义变量
$prefix: 'm'; // 类名前缀
$directions: (
  // 方向缩写与属性值的映射关系（左）
  'l': 'left',
  // 方向缩写与属性值的映射关系（右）
  'r': 'right',
  // 方向缩写与属性值的映射关系（底部）
  'b': 'bottom',
  // 方向缩写与属性值的映射关系（顶部）
  't': 'top'
);
$step: 1; // 步长
$max: 100; // 最大值
$properties: (
  // 属性缩写与属性名称的映射关系（外边距）
  'm': 'margin',
  // 属性缩写与属性名称的映射关系（内边距）
  'p': 'padding'
);

// 循环生成margin,padding设置语句
@each $dirKey, $dirValue in $directions {
  @for $i from 1 through ceil($max / $step) {
    @each $propKey, $propValue in $properties {
      // 组合生成类名
      $className: $propKey + $dirKey + $i * $step;
      .#{$className} {
        // 生成对应的CSS样式规则
        #{$propValue}-#{$dirValue}: #{$i * $step}px;
      }
    }
  }
}

将这个SCSS导入到项目中,就会生成一个CSS文件,这个CSS文件的内容就是margin和padding的各个方向,数值则为从1到设置的最大值px

效果图(SCSS处理后生成的CSS文件):