如何调用Bootstrap的LESS梯度混合

Question

Bootstrap垂直梯度mixin定义如下：

#gradient {
  .vertical (@start-color, @end-color) when (@disable-filters)  {
    /* code */
  }
}

我在我的LESS中打电话给.#gradient > .vertical(#fff, #ddd);。但编译给我以下错误。

ParseError: Syntax Error on line 104 in front.less:104:8
103         border-bottom: 2px solid white;
104         .#gradient > .vertical(#fff, #ddd);
105       }

评论上面的一行可以解决问题。调用Bootstrap的垂直梯度mixin的正确方法是什么？

Answer 1

这个想法在Bootstrap 3中是相同的（正如David Taiaroa建议的那样），此外还有两个额外的参数可以传递来控制渐变的外观：

.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%);
}

您将获得以下结果：

Answer 2

我认为某些梯度混合的Bootstrap v2.2.2文档中可能存在拼写错误。如果检查mixins.less文件，看起来在调用梯度mixin时不需要前导点，即     #gradient＆gt; .vertical（＃999，＃fff）;

我有这个工作。

在html页面上，我有一个ID = gradient-test

的div

在我的自定义mixin中，我有：

#gradient-test{  
#gradient > .vertical(#999, #fff);  
}

祝你好运！