0

私のコードには次のものがあります：

    background: -moz-linear-gradient(
 top,
        white,
        #e5e5e5 88%,
        #d8d8d8
    );
    background: -webkit-gradient(
 linear,
        left top, left bottom,
        from(white),
        to(#d8d8d8),
        color-stop(0.88, #e5e5e5)
    );

と

background: -moz-linear-gradient(
    top,
    #8b8b8b,
    #a9a9a9 10%,
    #bdbdbd 30%,
    #bfbfbf
);
background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(#8b8b8b),
    to(#bfbfbf),
    color-stop(0.1, #a9a9a9),
    color-stop(0.3, #bdbdbd)
);

これらをミックスインとして実装し、使用量を減らしたいと思います。ただし、これには2つのミックスインが必要なようです。誰かが私がこれを行う方法とこれを行うための2つのミックスインがどのように見えるかを説明できますか？この質問が少し単純な場合は申し訳ありませんが、私はミックスインを使い始めたばかりで、それらをコーディングする方法を理解しようとしています。

4

1 に答える 1

0

LESSはパターンマッチングを使用するため、おそらく2つのミックスインが必要になることは間違いありません（1つは1つのストップを取り、もう1つは2つのストップを取ります）。次のコードはこれを示しています（おそらくさらに減らすことができますが、これにより何が起こっているのかがかなり明白になります）。「名前」は同じですが（私の場合はsetTopGradient）、変数の数が異なることに注意してください。

訂正：あなたの質問は、webkit停止に小数を使用することを示しましたが、このページによれば、それは必要ではありません。そこで、次のコードをパーセンテージだけに更新しました。

以下

.setTopGradient(@startClr, @endClr, @st1Clr, @st1Pos) {

   background: -moz-linear-gradient(
      top,
      @startClr,
      @st1Clr @st1Pos,
      @endClr
   );

   background: -webkit-linear-gradient(
      linear,
      left top,
      left bottom,
      from(@startClr),
      to(@endClr),
      color-stop(@st1Pos, @st1Clr)
   );
}

.setTopGradient(@startClr, @endClr, @st1Clr, @st1Pos, @st2Clr, @st2Pos) {

   background: -moz-linear-gradient(
      top,
      @startClr,
      @st1Clr @st1Pos,
      @st2Clr @st2Pos,
      @endClr
   );

   background: -webkit-linear-gradient(
      linear,
      left top,
      left bottom,
      from(@startClr),
      to(@endClr),
      color-stop(@st1Pos, @st1Clr),
      color-stop(@st2Pos, @st2Clr)
   );
}

.someClass1 {
.setTopGradient(white, #d8d8d8, #e5e5e5, 88%);
}
.someClass2 {
.setTopGradient(#8b8b8b, #bfbfbf, #a9a9a9, 10%, #bdbdbd, 30%);
}

CSS出力

.someClass1 {
  background: -moz-linear-gradient(top, #ffffff, #e5e5e5 88%, #d8d8d8);
  background: -webkit-linear-gradient(linear, left top, left bottom, from(#ffffff), to(#d8d8d8), color-stop(88%, #e5e5e5));
}
.someClass2 {
  background: -moz-linear-gradient(top, #8b8b8b, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf);
  background: -webkit-linear-gradient(linear, left top, left bottom, from(#8b8b8b), to(#bfbfbf), color-stop(10%, #a9a9a9), color-stop(30%, #bdbdbd));
}
于 2012-12-27T03:33:26.527 に答える