1

これは私のLESSMixinです：

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

以下を取得せずにMSフィルターに追加のアルファ情報を追加できるようにしたいので、Mixinを呼び出すときに「＃」を削除しました。

#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 );
}

CodeKit1.3.5を使用してコンパイルしています。コンパイルエラーは発生していませんが、明らかに何かが間違っています。

4

1 に答える 1

3

更新-問題は解決しました

これは私の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 )";
};

そして、これは私がそれを呼ぶ方法です：

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

重要なのは、HEX値を一重引用符で囲むことです。なぜ正しく解析されることがあり、他の解析が行われないのかは100％わかりませんが、これで問題は解決しました。

于 2012-12-04T23:10:35.497 に答える