I have the following code in my .less
stylesheet.
@text-inputs: input[type=text], input[type=password], input[type=email], input[type=number];
@shade: rgba(0, 0, 0, 0.1);
.highlight {
background: @shade;
}
.input-highlight {
@{text-inputs} {
.highlight;
}
}
.input-highlight-subtle {
@{text-inputs} {
&:focus {
.highlight;
}
}
}
My HTML:
<body class="input-highlight-subtle">
<input type="text" placeholder="Type Here" />
<input type="password" placeholder="Type Here"/>
</body>
The result of the above CSS: The background of the input is the @shade
color even when I'm not hovering on the input. I checked in my browser developer tools and apparently it generates the code like this:
.highlight {
background: rgba(0, 0, 0, 0.1);
}
.input-highlight-subtle input[type=text], input[type=password], input[type=email], input[type=number]:focus {
background: rgba(0, 0, 0, 0.1);
}
So how do I solve this?
EDIT:
Basically I'd like to have an output like this:
.input-highlight-subtle input[type="text"]:focus, .input-highlight-subtle input[type="password"]:focus, .input-highlight-subtle input[type="email"]:focus, .input-highlight-subtle input[type="number"]:focus {
.highlight;
}
How can I achieve that ^ with LESS code? (Pun Intended)
You can try with:
Credits for @seven-phases-max for his answer Focused selector in variable . How to do that stuff in LESS like in SCSS
I have just adapted it to your case, Here you have it working on this FIDDLE example, I hope this helps
EDIT1: I found this @scottgit comment and I thought it should also be considered
" there is a work around to get the functionality of assigning properties to a set of selectors defined in a variable using the capabilities of LESS 1.7. Consider this:"
"So I can assign a pseudo class if I want or not, and pass a set of properties as needed. The key is to put the mixin
.getProps()
call into the block that is defining the selectors for variable@inputs
, which is then called as a local mixin inside.setProps()
so that the properties get put where we want them. The@extension
could be any escaped string to add to each selector as an additional part of the selector string. Above I do:focus
as a pseudo class, but I could have done~' > div + div'
as a child and sibling combination, or whatever."and here the jsfiddle example