这是我的 LESS Mixin:
.gradient (@start, @stop) {
background: ~"#@{start}";
background: ~"-moz-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
background: ~"-webkit-gradient(linear, left top, left bottom, color-stop(0%,#@{start}), color-stop(100%,#@{stop}))";
background: ~"-webkit-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
background: ~"-o-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
background: ~"-ms-linear-gradient(top, #@{start} 0%, #@{stop} 100%)";
background: ~"linear-gradient(to bottom, #@{start} 0%, #@{stop} 100%)";
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#00@{start}', endColorstr='#00@{stop}', GradientType=0 )";
};
这就是我所说的:
.multi-button {
.gradient (ffffff, ededed);
}
编译后我得到这个(这是正确的):
.multi-button {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ededed', GradientType=0 );
}
我在调用 Mixin 时删除了“#”,因为我希望能够将额外的 alpha 信息添加到 MS 过滤器中,而无需获得以下信息:
#00#ffffff
但是,这并不适用于所有情况,我不知道为什么?上述工作,但在另一个梯度我得到不同的结果。这就是我调用 Mixin 的方式:
.quick-button.blue {
.gradient (67c2ef, 00a2ed);
}
编译后,我得到这个:
.quick-button.blue {
background: #[object Object],[object Object];
background: -moz-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#[object Object],[object Object]), color-stop(100%,#[object Object],[object Object]));
background: -webkit-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
background: -o-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
background: -ms-linear-gradient(top, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
background: linear-gradient(to bottom, #[object Object],[object Object] 0%, #[object Object],[object Object] 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00[object Object],[object Object]', endColorstr='#00[object Object],[object Object]', GradientType=0 );
}
我正在使用 CodeKit 1.3.5 进行编译。我没有收到任何编译错误,但显然出了点问题。