3

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?

Community
  • 1
  • 1
bladekp
  • 1,529
  • 22
  • 29

0 Answers0