在 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

据我所知没有办法。您可以做的最接近的事情是

[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

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

.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 不是有效的选择器。您可以，但是当与样式规则一起使用时它仍然必须产生一个有效的选择器，因为编译器不能假设您不会在它自己的一组样式声明中使用该选择器（尽管当然，预处理器是否应该以这种方式控制作者还有待商榷...)。

Answer 3

Disclaimer: This is strictly how not to over-complicate things but yeah it is still possible in a way using selector interpolation and mixins.

您可以编写如下所示的混入，将属性名称用作一个输入参数，将条件用作另一个输入参数。 condition 是一个可选参数，当它没有提供时，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 中使用父选择器指定属性值？

Specify an attribute value using the parent selector in LESS?

css-selectors

less