jfox jfox - 2 months ago 20
Less Question

Output nested selectors as individual lines with LESS

I'm just curious, if I have code written like this:

.newsletter-form input {
&::-webkit-input-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
color: red !important;
}
}


It will output as:

.newsletter-form input::-webkit-input-placeholder,
.newsletter-form input::-moz-placeholder,
.newsletter-form input:-ms-input-placeholder {
color: red !important;
}


But, I actually want it to be output as individual lines like this:

.newsletter-form input::-webkit-input-placeholder {
color: red !important;
}
.newsletter-form input::-moz-placeholder {
color: red !important;
}
.newsletter-form input:-ms-input-placeholder {
color: red !important;
}


How am I able to do this with LESS?

I understand I could just write it as separate lines using regular CSS, but that would be no fun.

Answer

I found that if I just structured it like this, without the commas, I get the desired outcome.

.newsletter-form input {
  &::-webkit-input-placeholder {
    color: red !important;
  }
  &::-moz-placeholder {
    color: red !important;
  }
  &:-ms-input-placeholder {
    color: red !important;
  }
}

Or using a mixin for flexibility.

.placeholder(@color) {
  &::-webkit-input-placeholder {color: @color !important;}
  &::-moz-placeholder {color: @color !important;}
  &:-ms-input-placeholder {color: @color !important;}
}

.newsletter-form input {
  .placeholder(red)
}