如何用单个动态CSS类实现margin-left-x的百分比边距效果？

当然可以不用手动写一堆重复的CSS类，下面给你几个实用的方法：

1. 用CSS预处理器批量生成（最省心） #

如果你用Sass、Less这类预处理器，只需要写一段循环代码，就能自动生成所有你需要的margin-left-x类，不用手动一个个敲：

比如Sass代码：

// 生成1到100的margin-left类，可按需调整范围
@for $i from 1 through 100 {
  .margin-left-#{$i} {
    margin-left: #{$i}%;
  }
}

编译后会自动输出.margin-left-1到.margin-left-100的所有类，完美匹配你想要的HTML写法：

<div class="col-sm-4 col-md-4 margin-left-20">
  <p> Hello </p>
</div>

2. 原生CSS结合自定义属性（无需预处理器） #

如果不想用预处理器，用原生CSS的自定义属性（变量）也能实现，只是HTML里要多写个style属性：

CSS代码：

.margin-left {
  margin-left: calc(var(--ml-value) * 1%);
}

HTML写法：

<div class="col-sm-4 col-md-4 margin-left" style="--ml-value: 20">
  <p> Hello </p>
</div>

这种方式不用写多个类，一个.margin-left就能搞定所有数值，只是需要在元素上定义变量值。

3. 原生CSS结合data属性（兼容性稍弱） #

还有一种用data-*属性的方式，依赖CSS的attr()函数，不过目前部分浏览器对非content属性的attr()支持还不完善，谨慎使用：

CSS代码：

[data-margin-left] {
  margin-left: attr(data-margin-left)%;
}

HTML写法：

<div class="col-sm-4 col-md-4" data-margin-left="20">
  <p> Hello </p>
</div>

总结一下，最推荐用预处理器批量生成的方式，既符合你想要的HTML写法，又不用手动维护一堆重复代码。

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