在 Sass 3.4 之前,这根本不可能。 至关重要的功能是能够将当前选择器存储到变量中以及拆分字符串的能力(尽管后者可以通过 SassScript 函数创建)。
@mixin append-attr($x) {
$sel: &;
$collector: ();
@for $i from 1 through length($sel) {
$s: nth($sel, $i);
$last: nth($s, -1);
@if str-slice($last, -1) == "]" {
$offset: -1;
$current-x: $x;
@if str-slice($last, -2) == '"]' {
$offset: -2;
} @else {
$current-x: '="' + $x + '"';
}
$last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset);
$collector: append($collector, set-nth($s, -1, $last), comma);
} @else {
$collector: append($collector, selector-append($s, $x), comma);
}
}
@at-root
@content;
}
}
使用方法:
[data-product] {
color: white;
@include append-attr("red") {
color: red;
@include append-attr('-green') {
color: green;
}
}
}
[one], [two] {
color: orange;
@include append-attr('alpha') {
color: yellow;
}
}
[test], .test {
@include append-attr('-one') {
color: red;
}
}
.bar input[min] {
@include append-attr('5') {
background: yellow;
}
}
输出:
[data-product] {
color: white;
}
[data-product="red"] {
color: red;
}
[data-product="red-green"] {
color: green;
}
[one], [two] {
color: orange;
}
[one="alpha"], [two="alpha"] {
color: yellow;
}
[test="-one"], .test-one {
color: red;
}
.bar input[min="5"] {
background: yellow;
}
相关内容: 如何在Sass中修改选择器的中间部分(添加/删除类等)