来自HTML的SASS中的动态值

Question

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

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

在超文本标记语言中，我可以使用<div class="margin-10"></div>

但后来发现了SASS，这太神奇了。它真的帮助我快速开发应用程序，特别是它的混入特性。但我有个问题。这是一个场景。

SCSS Mixin是：

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

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

在超文本标记语言中，我可以使用<div class="box"></div>

有没有可能创建动态类？例如，如果我使用<div class="margin-left-10"></div>，它会使用混合自动创建左边界类。如果我使用<div class="padding-top-100"></div> padding-top-100类是使用SASS混合自动创建和操作的

Answer 1

这里有一个可以帮助你的混音器：

@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 class="XXX margin-top-40"></div>在div上设置40px的页边距即可