Css 来自HTML的SASS中的动态值

以前我使用创建助手CSS来帮助快速开发。 助手CSS的内容如下：

.margin-10{
  margin:10px!important;
}
.....

在HTML中，我可以使用

但后来发现了SASS，这太神奇了。它确实帮助我快速开发应用程序，尤其是它的mixin特性。但我有个问题。 下面是一个场景

SCSS混合物是：

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
 -moz-border-radius: $radius;
  -ms-border-radius: $radius;
      border-radius: $radius;
 }

 .box {
   @include border-radius(10px);
 }

在HTML中，我可以使用

是否有可能创建动态类？ 例如，如果我使用

，它会使用mixin自动创建marginleft类。

---

如果我使用

padding-top-100类是使用SASS mixin自动创建和操作的

这里有一个mixin可以帮助您：

@mixin createMargin($min, $max)
  @for $i from $min to $max+1
    .margin-#{$i}
      margin : 1px * $i !important

    .margin-top-#{$i}
       margin-top: 1px * $i !important

    .margin-left-#{$i}
       margin-left : 1px * $i !important

    .margin-right-#{$i}
       margin-right: 1px * $i !important

    .margin-bottom-#{$i}
      margin-bottom: 1px * $i !important

@include createMargin(0, 100) // Choose your min and max value

---

所以你只需要使用

就可以在你的div上有一个40px的边距上限

不……这就是SASS存在的原因。至少在数据属性样式出现之前……但这可能是相关的——但这将生成0-100之间的所有边距类，对吗？那么编译呢？是否只编译我使用的那些类，或者它将编译0到100之间的边距类。是的，问题是这将生成0到100之间的所有边距类：/