使用较少的mixin和guard表达式在@media打印时添加css

Question

我想避免在我的代码中重复。是不是可以在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;
  }

这看起来不像是一种改进。但是我正在处理多个类，并且需要为所有这些类做这个。所以如果不可能的话，可能还有其他选择吗？

Answer 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"了解更复杂的内容。