as I understand from here, I can't place my CSS selectors which contains "pseudo browsers selectors" (-moz-range-track
, -webkit-slider-thumb
, and so on) separated by comma, because if browser did not recognize one of the selectors then will ignore all the rules in curly brackets {}.
So when I try to compile my LESS rules:
input {
&[type=range]{
&::-moz-range-track,
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
In the result I will see:
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
Which will not work because of reason I mentioned earlier.
So in LESS I have to do it like (it isn't of course LESS style):
input {
&[type=range]{
&::-moz-range-track
{
width:100%;
height: 32px;
}
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
Which compiles to:
input[type=range]::-moz-range-track {
width: 100%;
height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
And works as expected.
And my question, is there any possible to do it looks nicely in LESS?