Is there a way to write custom selectors in LESS?
I will give an example of what I would like to do.
:all() {
&,
&:link,
&:visited,
&:active,
&:focus
}
The above is a "custom selector" that itself returns a selection of all the anchor tag pseudo-classes, minus: hover.
I would like to use it as a selector, for example:
.menu {
a.top-level:all, span {
color: @dormant-grey;
}
a.top-level:hover {
color: @off-black;
}
}
And to create it:
.menu a.top-level,
.menu a.top-level:link,
.menu a.top-level:visited,
.menu a.top-level:active,
.menu a.top-level:focus,
.menu span {
color: #686868;
}
.menu a.top-level:hover {
color: #22282a;
}
So, I hope I am clear about what the question is. Is there a way to reuse a selection ?
Note that this is different from passing styles to the mixin. Transferring styles to a mixin will require style repetition to achieve the same. Go to mixin once and then again for all other choices the mixin does not handle. This is what I am doing now and I found that it is not worth using a mixin because I had to repeat myself so many times that I am just going to pull it out.
So I hope this is clear. I am asking if there is a way to reuse selection and not style. If less cannot do it, is there a language that can?
source to share
(Therefore, in order not to leave this answer unanswered - copying my comment above):
.all(@-) {
&,
&:link,
&:visited,
&:active,
&:focus {
@-();
}
}
.menu {
.span {
color: red;
}
a.top-level {
.all({.span});
:hover {
color: blue;
}
}
}
This obviously produces duplicate styles for families .span
and a.top-level
, but once you care and generate a minified version of the CSS --clean-css --clean-option=--advanced
, you remove the duplicated styles lovingly.
source to share