使用SCSS在DOM中定义动态类名

Question

我希望直接在DOM（class attr）

中有类似的东西

<a class="padding-left-30"> Link 1 </a>
<a class="padding-right-15"> Link 1 </a>

没有为它定义一个严格的类（即：style="padding-left: 30px"或style.css中相同的

我正试图做一些像这样简单的事情：

@mixin .padding-#{$direction}-#{$px} {
    padding-#{$direction}: #{$px}px;
}

但它给了我一个错误：

invalid name in @mixin definition

知道如何调整吗？

Answer 1

1. 制作两张包含您要混合的属性的地图。
2. 对于每个组合，创建一个占位符类。如果您不想创建可能无法使用的完整课程列表，我认为这是合适的。这是模块化友好的用途。

3. 扩展元素中的类。

   $paddingDirection:('right','left','top','bottom');
   $paddingLength:(15,30,45,50);
   
   @each $dir in $paddingDirection{
     @each $len in $paddingLength{
       %padding-#{$dir}-#{$len}{ padding-#{$dir}: #{$len}px;}
     }
   }
   
   .padding-right-30{
     @extend %padding-right-30;
   }
   
   /*output*/
   .padding-right-30 {
      padding-right: 30px;
   }