Bootstrap中的渐变混合？

Question

Bootstrap 的 theme.less 文件中有一个 mixin，我正试图理解它。我对 LESS 很陌生，所以只是尽可能多地学习，同时还要完成工作 LOL。

核心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

}

按钮样式的mixin是这样的：

.btn-styles(@btn-color: #555) {
     #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
     ...

我正在尝试了解如何使用它...我是否需要一个 id 为 #gradient 的父元素和一个 .vertical 的子元素？其余的我能想出来，比如设置颜色等。

顺便说一句，我最初认为#gradient > .vertical 是一个比较运算符，但这是不正确的，对吧？它只是一个 CSS 子选择器，对吧？

也许我走错了方向，但我感谢您的帮助。非常感谢！

Answer 1

以横屏为例。只需填写@start-color: #555; @结束颜色：#333； @开始百分比：0％； @end-percent：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;
 }

你必须在谷歌上搜索一些 LESS 教程，一旦你完成了其中的一些，你就会明白了。