21

Bootstrap垂直グラデーションミックスインは次のように定義されています。

#gradient {
  .vertical (@start-color, @end-color) when (@disable-filters)  {
    /* code */
  }
}

私は.#gradient > .vertical(#fff, #ddd);自分のLESSを呼んでいます。しかし、コンパイルすると次のエラーが発生します。

ParseError: Syntax Error on line 104 in front.less:104:8
103         border-bottom: 2px solid white;
104         .#gradient > .vertical(#fff, #ddd);
105       }

上記の行をコメントアウトすると、問題が修正されます。Bootstrapの垂直グラデーションミックスインを呼び出す適切な方法は何ですか？

4

2 に答える 2

30

考え方はBootstrap3でも同じです（David Taiaroaが提案したように）。さらに、グラデーションの外観を制御するために渡すことができる2つの追加パラメーターがあります。

.vertical(@start-color; @end-color; @start-percent; @end-percent)

したがって、たとえば、custom.lessファイルで次のようなことを行うことができます。

@import '../less/bootstrap.less';

.promo-content{
  #gradient.vertical(#fff; #c3c3c3; 0%; 10%);
  height:100px;
  .text-center;
  padding-top: 25px;
  margin-bottom: 10px;
  border:1px solid #e2e2e2;
}

.promo-content2{
  #gradient.vertical(#fff; #c3c3c3; 0%; 90%);
}

そして、次の結果が得られます。

ここに画像の説明を入力してください

于 2013-08-19T16:39:02.547 に答える
27

一部のグラデーションミックスインについては、Bootstrapv2.2.2ドキュメントにタイプミスがあると思います。mixins.lessファイルを確認すると、グラデーションミックスインを呼び出すときに先頭のドットは必要ないように見えます。つまり、＃gradient> .vertical（＃999、#fff）;

私はこれを機能させています。

HTMLページにID=gradient-testのdivがあります

私のカスタムミックスインには次のものがあります。

#gradient-test{  
#gradient > .vertical(#999, #fff);  
}

幸運を！

于 2012-12-17T01:18:33.947 に答える