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的上边距

来自HTML的SASS中的动态值

1 个答案: