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 の垂直グラデーション ミックスインを呼び出す適切な方法は何ですか?
ベストアンサー1
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%);
}
そして、次の結果が得られます。
