Specify an attribute value using the parent selector in LESS? - css-selectors

Question

Is is possible to use the parent selector in LESS to specify a value for a parent attribute selector?
I want the following output:
[some-attribute] {
font-weight: normal;
}
[some-attribute~="bold"] {
font-weight: bold;
}
Given this (obviously incorrect) example:
[some-attribute] {
font-weight: normal;
&~="bold" {
font-weight: bold;
}
}
Is something like this possible in LESS?
EDIT: For anyone who might be curious, I did try this abomination:
[some-attribute {
&] {
font-weight: normal;
}
&~="bold"] {
font-weight: bold;
}
}
I'm kind of glad it didn't work. I might have been tempted.

Answer 1

Disclaimer: This is strictly how not to over-complicate things but yeah it is still possible in a way using selector interpolation and mixins.
You could write a mixin like below which makes use of the attribute name as one input parameter and the condition as another. The condition is an optional parameter and when it is not provided, the mixin considers it as only a attribute presence selector.
The rules that have to be attached are also passed as input.
.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

The parent selector (&) only holds a reference to an entire complex selector, with the option to extend the selector provided that you use the entire thing as a base:
.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
}
}
}
It cannot be used to reference a part of a compound or simple selector, in particular it cannot be used to reference just the attribute name in an attribute selector. You'll have to stick with vanilla CSS.
The reason that abomination doesn't work is because both preprocessors expect all selectors in style rules to be valid; [some-attribute is not a valid selector. You could write a mixin and/or use selector interpolation, but it still has to result in a valid selector when used with a style rule, since the compiler can't assume that you won't be using the selector in its own set of style declarations (though of course, whether a preprocessor should be controlling the author in this way is up for debate...).

Answer 3

No way that I know of. The closest thing you can do is
[some-attribute] {
font-weight: normal;
&[some-attribute~="bold"] {
font-weight: bold;
}
}
which outputs
[some-attribute] {
font-weight: normal;
}
[some-attribute][some-attribute~="bold"] {
font-weight: bold;
}
but you're better off keeping them separate
[some-attribute] {
font-weight: normal;
}
[some-attribute~="bold"] {
font-weight: bold;
}