css - 使用 PIE 在较少的 css 中为多个渐变添加 @argument

Question

我有几个可以出现在按钮、框和页面中的网站所需的渐变。我想我会尝试 LESS CSS 以尽量减少样式表中的重复。

到目前为止，我有：

.gradient (@origin: bottom, @start: #000, @end: #333){
background: @start;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(@end), to(@start));
background: -webkit-linear-gradient(@origin, @start, @end);
background: -moz-linear-gradient(@origin, @start, @end);
background: -ms-linear-gradient(@origin, @start, @end);
background: -o-linear-gradient(@origin, @start, @end);
background: linear-gradient(@origin, @start, @end);
-pie-background: linear-gradient(@origin, @start, @end);
behavior: url(/PIE.htc);
}

我想使用类似于这个例子的@argument，所以我可以调用不同的颜色：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

这可以用十六进制或 RGB (@color: 0 ??) 来完成，还是我在这里有错误的逻辑来解决这个问题？谢谢。

Answer 1

您不能这样做，因为正如您在代码中看到的那样，某些浏览器对 css 渐变使用不同的语法，并且使用 @arguments 变量会为某些浏览器创建无效的 css。

您可以做的是“分组”使用相同语法的属性并稍微缩短您的代码：

.gradient (@origin: bottom, @start: #000, @end: #333){
    background: @start;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(@end), to(@start));
    background: -webkit-linear-gradient(@arguments);
    background: -moz-linear-gradient(@arguments);
    background: -ms-linear-gradient(@arguments);
    background: -o-linear-gradient(@arguments);
    background: linear-gradient(@arguments);
    -pie-background: linear-gradient(@arguments);
    behavior: url(/PIE.htc);
}