Question

是否可以使用LESS中的父选择器为父属性选择器指定值？

我想要以下输出：

[some-attribute] {
    font-weight: normal;
}

[some-attribute~="bold"] {
    font-weight: bold;
}

鉴于此（显然不正确）的例子：

[some-attribute] {
    font-weight: normal;

    &~="bold" {
        font-weight: bold;
    }
}

这种情况在LESS中是否可能？

编辑：对于任何可能感到好奇的人，我确实尝试过这种可憎的行为：

[some-attribute {

    &] {
        font-weight: normal;
    }

    &~="bold"] {
        font-weight: bold;
    }
}

我很高兴它不起作用。我可能会受到诱惑。

Answer 1

我不知道。你最接近的是

[some-attribute] {
    font-weight: normal;

    &[some-attribute~="bold"] {
        font-weight: bold;
    }
}

输出

[some-attribute] {
  font-weight: normal;
}

[some-attribute][some-attribute~="bold"] {
  font-weight: bold;
}

但你最好将它们分开

[some-attribute] {
    font-weight: normal;
}

[some-attribute~="bold"] {
    font-weight: bold;
}

Answer 2

父选择器（prepareForSegue）仅保存对整个复杂选择器的引用，并提供扩展选择器的选项，前提是您将整个事物用作基础：

它不能用于引用复合或简单选择器的一部分，特别是它不能用于仅引用属性选择器中的属性名称。你必须坚持使用vanilla CSS。

憎恶不起作用的原因是两个预处理器都希望样式规则中的所有选择器都有效; .one > .two { &::after, &::before { // Compiles to .one > .two::after, .one > .two::before } & + .three { // Compiles to .one > .two + .three &-suffix { // Compiles to .one > .two + .three-suffix } } }不是有效的选择器。你可以write a mixin and/or use selector interpolation，但是当与样式规则一起使用时，它仍然必须产生一个有效的选择器，因为编译器不能假设你不能在它自己的一套中使用选择器样式声明（当然，预处理器是否以这种方式控制作者是有争议的......）。

Answer 3

免责声明：严格来说，这是如何不使事情过于复杂，但是仍然可以使用选择器插值和mixins。

你可以编写一个如下所示的mixin，它使用属性名作为一个输入参数，条件作为另一个。条件是可选参数，当未提供时，mixin将其视为属性存在选择器。

必须附加的规则也作为输入传递。

.mixin-attrib-selector(@attr-name, @rule, @param:null){
    @sel-start: ~"[";
    @sel-end: ~"]";
    @{sel-start}@{attr-name}{
        & when(@param = null){
            &@{sel-end}{
                @rule();
            }
        }
        & when not (@param = null){
            &@{param}@{sel-end}{
                @rule();
            }
        }
    }
}

.mixin-attrib-selector(some-attribute, {
            font-weight: normal;
        });
.mixin-attrib-selector(some-attribute,{
            font-weight: bold;
        }, ~"~='bold'");

#output{
    .mixin-attrib-selector(some-attr, {
                font-weight: normal;
            });
    .mixin-attrib-selector(some-attr,{
                font-weight: italic;
            }, ~"~='italic'");
}

使用LESS中的父选择器指定属性值？

3 个答案: