来自 HTML 的 SASS 中的动态值

Question

以前我曾经创建我的帮助 CSS 来帮助快速开发。 辅助 CSS 的内容如下：

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

在 HTML 中我可以使用 <div class="margin-10"></div>

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

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);
 }

在 HTML 中我可以使用<div class="box"></div>

是否有可能创建动态类？ 例如，如果我使用<div class="margin-left-10"></div>，它会使用 mixin 自动创建左边距类。 如果我使用 <div class="padding-top-100"></div> padding-top-100 类会自动创建并使用 SASS mixin 进行操作

Answer 1

这里有一个可以帮助你的 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 class="XXX margin-top-40"></div> 在你的 div 上有一个 40px 的边距