web-dev-qa-db-ja.com

BootstrapのLESSグラデーションミックスインを呼び出す方法

Bootstrap vertical gradient mixinは次のように定義されます：

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

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

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

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

twitter-bootstrapless
21
Matm

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

私はこれを働いています。

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

私のカスタムミックスインには次のものが含まれています：

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

幸運を！

27
David Taiaroa

Bootstrap 3（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%);
}

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

enter image description here

30
AJ Meyghani