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

见Passing Rulesets to Mixins。 E.g：

.newsletter-form input {
    .placeholder({
        color: red !important;
    });
}

.placeholder(@rules) {
    &::-webkit-input-placeholder {@rules();}
    &::-moz-placeholder          {@rules();}
    &:-ms-input-placeholder      {@rules();}
}

与prev的解决方案不同。答案，这种方式不会要求将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;
}

将嵌套选择器输出为具有LESS的单独行

3 个答案: