简化 sass 属性选择器

Question

我试图想出一种方法来简化一些 SCSS 属性选择器。我最终得到的是：

[data-attr="opt1"] { ... }
[data-attr="opt2"] { ... }
[data-attr="opt3"] { ... }

我希望能够写出更接近于：

[data-attr]
    &="opt1" { ... }
    &="opt2" { ... }
    &="opt3" { ... }

通过 mixin 或其他方式。虽然想不出解决办法。有什么聪明的主意吗？

Answer 1

我想到了这个主意：

@mixin attrVal($value) {
    $attr: str-slice(#{&}, 2, -2); // $attr = "data-attr"
    @at-root { 
        [#{$attr}="#{$value}"] {
           @content; 
        }
    } 
}

[data-attr] {
    @include attrVal('opt1') { width: 10px; }
    @include attrVal('opt2') { width: 20px; }
    @include attrVal('opt3') { width: 30px; }
}

---

输出（在 sassmeister.com 上测试）

[data-attr="opt1"] { width: 10px; }
[data-attr="opt2"] { width: 20px; }
[data-attr="opt3"] { width: 30px; }

对于这个特定的示例，没有那么大的简化，但是通过这种方法，您实际上是在将属性名称与其值解耦（为了代码重用）。