twitter-bootstrap 如何调用 Bootstrap 的 LESS 梯度混合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13040765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call Bootstrap's LESS gradient mixins
提问by Matm
The Bootstrap vertical gradient mixin is defined as follows:
Bootstrap 垂直梯度混合定义如下：
#gradient {
.vertical (@start-color, @end-color) when (@disable-filters) {
/* code */
}
}
I'm calling .#gradient > .vertical(#fff, #ddd);in my LESS. But compiling gives me the following error.
我正在调用.#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 }
Commenting out the line above fixes the issue. What's the proper way to invoke Bootstrap's vertical gradient mixin?
注释掉上面的行可以解决问题。调用 Bootstrap 的垂直渐变混合的正确方法是什么？
回答by AJ Meyghani
The idea is the same in Bootstrap 3 (as David Taiaroa suggested) and in addition there are two additional parameters that you can pass in to control how the gradient looks:
这个想法在 Bootstrap 3 中是一样的（正如 David Taiaroa 建议的那样），此外还有两个额外的参数你可以传入来控制渐变的外观：
.vertical(@start-color; @end-color; @start-percent; @end-percent)
So for example you can do something like the following in your custom.lessfile:
例如，您可以在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%);
}
And you will get the following results:
你会得到以下结果：
回答by David Taiaroa
I think there may be a typo in the Bootstrap v2.2.2 docs for some of the gradient mixins. If you check the mixins.less file it looks like you don't need the leading dot when calling the gradient mixin, ie #gradient > .vertical(#999, #fff);
我认为 Bootstrap v2.2.2 文档中可能有一些梯度混合的错字。如果您检查 mixins.less 文件，看起来您在调用渐变混合时不需要前导点，即 #gradient > .vertical(#999, #fff);
I have this working.
我有这个工作。
On an html page I have a div with ID=gradient-test
在 html 页面上，我有一个 ID=gradient-test 的 div
In my custom mixin I have:
在我的自定义 mixin 中，我有：
#gradient-test{
#gradient > .vertical(#999, #fff);
}
Good luck!
祝你好运！
