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; @ end-color：＃333; @ start-percent：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教程，一旦你完成了一些教程，你就会明白这一点。

Bootstrap中的渐变混合？

1 个答案: