twitter-bootstrap Bootstrap 中的梯度混合？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20364884/
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
Gradient mixin in Bootstrap?
提问by jaminroe
There is a mixin in Bootstrap's theme.less file, that I'm trying to understand. I'm very new to LESS so just trying to learn as much as possible, while still getting work done LOL.
Bootstrap 的 theme.less 文件中有一个 mixin，我正在尝试理解。我对 LESS 很陌生，所以我只是想尽可能多地学习，同时仍然完成工作，哈哈。
The core mixin is like so:
核心mixin是这样的：
#gradient {
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
}
The mixin for button styles is like so:
按钮样式的 mixin 是这样的：
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
...
I'm trying to understand how to use this... Do I need a parent element with an id of #gradientand a child element of .vertical? The rest I can figure out, like setting the colors, etc.
我试图了解如何使用它...我是否需要一个带有 id#gradient和一个子元素的父元素.vertical？其余的我可以弄清楚，比如设置颜色等。
On a side note, I originally thought that the #gradient > .verticalwas a comparison operator, but that's incorrect right? Its just a CSS child selector right?
附带说明一下，我最初认为这#gradient > .vertical是一个比较运算符，但这是不正确的，对吗？它只是一个 CSS 子选择器，对吗？
Maybe I'm going the wrong direction, but I appreciate the help. Thank you so much!
也许我走错了方向，但我很感激你的帮助。太感谢了！
采纳答案by Christina
It's done like so using the horizontal as the example. Just fill in the @start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%:
使用水平作为示例，它是这样做的。只需填写@start-color: #555; @结束颜色：#333；@开始百分比：0%；@结束百分比：100%：
//USAGE
#myboxwithagradient {
#gradient.horizontal(#555;#333;0%;100%);
width:100%;
height:50px;
float:left;
}
//OUTPUT
#myboxwithagradient {
background-image: -webkit-gradient(linear, 0% top, 100% top, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(left, color-stop(#555555 0%), color-stop(#333333 100%));
background-image: -moz-linear-gradient(left, #555555 0%, #333333 100%);
background-image: linear-gradient(to right, #555555 0%, #333333 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
width:100%;
height:50px;
float:left;
}
You gotta google for some LESS tutorials, once you've gone through a few of them you'll figure it out.
你必须在谷歌上搜索一些 LESS 教程，一旦你浏览了其中的一些教程，你就会明白。
