1

这是我的 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 进行编译。我没有收到任何编译错误，但显然出了点问题。

4

1 回答 1

3

更新 - 问题已解决

这是我的混音：

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

这就是我所说的：

.gradient ('eeeeee', 'f9f9f9');

关键是将 HEX 值用单引号括起来。我不是 100% 确定为什么它有时能正确解析而不是其他的，但这解决了这个问题。

于 2012-12-04T23:10:35.497 回答