来自HTML的SASS中的动态值-Java 学习之路

以前我曾经创建过我的帮助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自动创建和操作的

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

回复于 2024-05-06T00:11:13+08:00

来自HTML的SASS中的动态值

1 回答

相关问题