21

Bootstrap 垂直梯度 mixin 定义如下:

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

我打电话给.#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       }

注释掉上面的行可以解决这个问题。调用 Bootstrap 的垂直渐变混合的正确方法是什么?

4

2 回答 2

30

这个想法在 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%);
}

你会得到以下结果:

在此处输入图像描述

于 2013-08-19T16:39:02.547 回答
27

我认为某些渐变混合的 Bootstrap v2.2.2 文档中可能存在拼写错误。如果您检查 mixins.less 文件,看起来在调用渐变混合时不需要前导点,即 #gradient > .vertical(#999, #fff);

我有这个工作。

在 html 页面上,我有一个 ID=gradient-test 的 div

在我的自定义 mixin 中,我有:

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

祝你好运!

于 2012-12-17T01:18:33.947 回答