1

ベンダーのプレフィックスでグラデーションを作成する mixin があり、この背景を別の に加えて DIV に追加したいと考えていbackground-imageます。

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background:@start-color;
    background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
    background-image+: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    background-repeat: repeat-x;
  }

.foo
{
  background-image+:url('bg.png');
  .horizontal;
}

私の例では、標準のCSS3グラデーション宣言にのみ追加したコンママージを使用することで解決できると思いました。これを行うと、生成された CSS は次のようになります。

.foo {
  background-image: url('bg.png'), linear-gradient(to right, #555555 0%, #333333 100%);
  background: #555555;
  background-image: -webkit-linear-gradient(left, #555555 0%, #333333 100%);
  background-image: -o-linear-gradient(left, #555555 0%, #333333 100%);
  background-repeat: repeat-x;
}

それは正しいですが、ミックスインの柔軟性を失うことなく、他のベンダーのプレフィックスにもこれを持たせるにはどうすればよいですか? +他の " " ルールにも記号を追加しようとしましbackground-image: -webkit....たが、この場合、結果の CSS は次のようになります。

.foo {
  background-image: url('bg.png'), -webkit-linear-gradient(left, #555555 0%, #333333 100%), -o-linear-gradient(left, #555555 0%, #333333 100%), linear-gradient(to right, #555555 0%, #333333 100%);
  background: #555555;
  background-repeat: repeat-x;
}

...明らかに正しくありません... 何か提案はありますか?

4

1 に答える 1

2

Less を使用してベンダー プレフィックス (または関連項目) を生成することは、最適な方法ではありません。Prefix Free や Auto Prefixer などのライブラリを使用する方がはるかに優れています。

そうは言っても、あなたの場合、画像に別のパラメーターを使用するのが最良の選択肢だと思います。このisurl()関数はtrue、入力パラメーターが URL の場合にのみ戻ります。

これは URL ではなく、空白/null 値の処理を処理するため、@imageパラメータのデフォルト値は に設定されています。none

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none) {
    background:@start-color;
    & when (isurl(@image)){
        background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when not (isurl(@image)){
        background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    background-repeat: repeat-x;
  }

.foo{
  .horizontal(@image: url('bg.png'));
}
.foo2{
  .horizontal(@image: 'bg.png');
}

上記の mixin では、変数の値が URL であるかどうかに基づいて@image、適切な出力が生成されます。

場合によっては、グラデーションに加えて (画像の代わりに、または画像に加えて) 色を使用したい場合があります。そのために、以下のように mixin をさらに強化できます。

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none; @color: none) {
    background:@start-color;
    & when (isurl(@image)) and not (iscolor(@color)){
        background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when (iscolor(@color)) and not (isurl(@image)){
        background-image: @color, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when (isurl(@image)) and (iscolor(@color)){
        background-image: @color, @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    & when not (isurl(@image)) and not (iscolor(@color)){
        background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    background-repeat: repeat-x;
  }

.foo{
  .horizontal(@image: url('bg1.png'));
}
.foo2{
  .horizontal(@image: 'bg.png');
}
.foo3{
  .horizontal(@color: blue);
}
.foo3{
  .horizontal(@color: red; @image: url('abc.gif'));
}

注:上記のサンプルではプロパティを使用background-imageしましたが、グラデーションや画像と共に単色を使用する場合は、background代わりにプロパティを使用する必要があります。

于 2015-04-28T07:29:13.397 に答える