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

【问题标题】：Define a dynamic class name in the DOM with SCSS使用 SCSS 在 DOM 中定义动态类名
【发布时间】：2017-05-31 00:21:27
【问题描述】：

我的愿望是直接在 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

知道如何调整吗？

【问题讨论】：

标签： sass

【解决方案1】：

用您想要混合的属性制作两张地图。
为每个组合创建一个占位符类。我认为如果您不想创建可能不会使用的类的完整列表，这是合适的。这是模块化友好的使用方式。

在你的元素中扩展类。

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

【讨论】：

感谢您的回答，但这正是我不想做的......否则我将继续在$paddingLength 中添加各种填充，为单个填充制作 4 行 - px ...：/任何其他想法？
这就是占位符类 % 存在的原因。你避免做任何行，但如果需要，你可以使用它们。
是的......仍然不是 100% 肯定，因为不是所有这些代码 .padding-right-30{ @extend %padding-right-30; } 我可以简单地说 .padding-right-30 { padding-right: 30px } .. 扩展它 - 并没有真正减少我的代码，不是吗？
在任何地方使用它，例如：.any-class{@extend %padding-right-30;}，您可以避免创建额外的类。