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

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

简化sass属性选择器

1 个答案: