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

我想避免代码中的重复。有可能用更少的时间来写这样的东西吗

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

---

这里看起来没有什么进步。但是我在为多个类工作，需要为所有类都这样做。。因此，如果这是不可能的，可能是另一种选择？

Less

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

---

另请参阅以了解更复杂的内容。

Less

@media

可以嵌套在规则中，这样您就可以定义这样的

。打印
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;
}

另请参阅，了解更复杂的内容