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

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

免责声明：严格来说，这是不让事情变得过于复杂的方法，但是是的，它仍然可以通过使用选择器插值和混合的方式实现。

你可以编写一个像下面这样的 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'");
}

Answer 2

父选择器 (&) 仅包含对整个复杂选择器的引用，如果您将整个选择器用作基础，则可以选择扩展选择器：

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

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

abomination 不起作用的原因是因为两个预处理器都希望样式规则中的所有选择器都是有效的； [some-attribute 不是有效的选择器。你可以write a mixin and/or use selector interpolation，但是当与样式规则一起使用时它仍然必须产生一个有效的选择器，因为编译器不能假设你不会在它自己的一组样式声明中使用选择器（当然, 预处理器是否应该 以这种方式控制作者还有待商榷...）。

Answer 3

我不知道。你能做的最接近的事情是

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