使用LESS将嵌套选择器作为单独的行输出

Question

我只是好奇，如果我有这样的代码:

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

输出如下:

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

但是，我实际上希望它作为单独的行输出，像这样:

.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;
}

我怎么能用LESS做到这一点?

我知道我可以用常规的CSS把它写成单独的行，但那就不好玩了。

Answer 1

参见将规则集传递给Mixins。例如:

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

与前面的解不同。答案，这种方式不需要你的placeholder mixin硬编码到一个特定的值或属性，如color: ...等。

Answer 2

我发现，如果我像这样组织它，不使用逗号，我就会得到想要的结果。

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

或者使用mixin来获得灵活性。

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

Answer 3

你可以创建一个mixin，将颜色设置为特定的选择器。

少

:

.set-color(@selector, @color) {
  &@{selector} {
    color: @color !important;
  }
}
.newsletter-form input {
   .set-color(~"::-webkit-input-placeholder", red);
   .set-color(~"::-moz-placeholder", red);
   .set-color(~":-ms-input-placeholder", red);
}

Css输出:

.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;
}