当@media print 使用 less mixin 和 guard 表达式时添加 css答案

【问题标题】：Add css when @media print using less mixin and guard expressions当@media print 使用 less mixin 和 guard 表达式时添加 css
【发布时间】：2014-07-02 18:46:06
【问题描述】：

我想避免代码中的重复。是否可以在LESS中写出这样的东西？

.print when (@media print = true) {
    background: @heading-background-color !important;
    -webkit-print-color-adjust: exact;
 }

  .header-month {
    .print
    background: @heading-background-color;
    font-weight: bold;
  }

代替：

@media print {
  .header-month {
    background: @heading-background-color !important;
    -webkit-print-color-adjust: exact;
  }
}

  .header-month {
    background: @heading-background-color;
    font-weight: bold;
  }

这里看起来不像是改进。但是我正在处理多个类，并且需要为所有类都这样做。所以如果不可能的话，也许可以选择一个替代方案？

【问题讨论】：

标签： printing less media-queries

【解决方案1】：

更少的@media 可以嵌套在规则中，因此您可以将.print mixin 定义为：

.print() {
    @media print {
        background: @heading-background-color !important;
        -webkit-print-color-adjust: exact;
    }
}

// usage:
.header-month {
    .print();
    background: @heading-background-color;
    font-weight: bold;
}

另请参阅"Passing Rulesets to Mixins" 了解更复杂的内容。

【讨论】：