如何通过Sass mixin从div类名生成pixel/rem/percent对应尺寸样式

完全可以实现，利用Sass的循环、变量插值、字符串映射能力就能快速生成你需要的所有工具类，除了你要求的px、百分比单位，还可以按需扩展rem、vw等常用单位。

完整实现代码 #

// 1. 配置类名字符串和实际CSS单位的映射
$unit-map: (
  'px': 'px',
  'percent': '%',
  'rem': 'rem'
);

// 2. 配置需要生成的样式属性，可按需增减
$support-attrs: (
  'width',
  'height',
  'padding-top',
  'padding-bottom',
  'padding-left',
  'padding-right',
  'margin-top',
  'margin-bottom',
  'margin-left',
  'margin-right'
);

// 3. 定义生成数值的最大值，控制生成CSS体积
$max-value: 500;

// 4. 生成工具类的mixin
@mixin generate-size-utils {
  @each $attr in $support-attrs {
    @for $val from 1 through $max-value {
      @each $unit-key, $unit-real in $unit-map {
        .#{$attr}-#{$val}#{$unit-key} {
          #{$attr}: #{$val}#{$unit-real};
        }
      }
    }
  }
}

// 调用mixin生成所有样式
@include generate-size-utils;

输出效果 #

上述代码编译后就会自动生成你需要的样式，完全匹配示例要求：

.height-134px {
  height: 134px;
}
.width-33percent {
  width: 33%;
}
/* 其余所有匹配规则的工具类都会自动生成 */

优化建议 #

• 若担心生成的CSS文件体积过大，可以删减$support-attrs和$unit-map的配置项，只保留你实际需要用到的属性和单位即可，比如只保留width、height和px、percent两个单位，生成的体积会非常小。
• 如果需要支持更大的数值，调整$max-value的数值即可。

内容的提问来源于stack exchange，提问作者Jeff