将浏览器选择器与 LESS 结合使用答案

【问题标题】：Combine browser selectors with LESS将浏览器选择器与 LESS 结合使用
【发布时间】：2013-05-10 07:36:44
【问题描述】：

是否可以将 -webkit、-moz、-o 和 -ms 选择器与 LESS 合并为一个？

我试过了

.transition(@t @d) {
    transition:@t @d;
    -webkit-transition:@t @d;
    -moz-transition:@t @d;
}

但它破坏了 css 文件。

我希望能够打字

.transition(WhatToTransition 持续时间)

并将其应用于所有选择器。

【问题讨论】：

标签： css less css-selectors transition

【解决方案1】：

你可以试着在参数之间加一个逗号。

.transition(@t, @d) {
    -moz-transition: @t @d @e;
    -webkit-transition: @t @d @e;
    transition: @t @d @e;
}

您还可以为参数添加另一个参数和一些默认值，如下所示：

.transition(@t: all, @d: 1s, @e: linear) {
    -moz-transition: @t @d @e;
    -webkit-transition: @t @d @e;
    -o-transition: @t @d @e;
    -ms-transition: @t @d @e;
    transition: @t @d @e;
}

我希望这能满足您的要求。而且我还会重新排序供应商前缀属性，将非前缀属性放在最后，例如，您还可以添加o 和ms，如上所示。

例如。少：

.test {
    .transition(all, 0.5s, ease-in);
}

将返回 CSS:

.test {
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

【讨论】：