如何使用bootstrap gradient mixin？

Question

如何使用梯度混合？ mixin文件说明了这一点：

#gradient { .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

我已尝试#gradient.vertical()，#gradient > .vertical()等等。

我需要导入一些东西吗？

这是使用带有meteor的nemo64：bootstrap less package

Answer 1

例如，为整个网页的背景设置样式：

body {
  #gradient > .vertical(@start-color; @end-color);
}

Answer 2

#gradient > .vertical();应该有效。确保你有@import混合曲目。

对于bootstrap，您可以导入less/mixins.less或less/mixins/gradients.less。

正如@Robert已经解释的那样，你应该在选择器中调用mixin：

@import "less/mixins";
div {
#gradient > .vertical();
}

输出：

div {
  background-image: -webkit-linear-gradient(top, #555555 0%, #333333 100%);
  background-image: -o-linear-gradient(top, #555555 0%, #333333 100%);
  background-image: linear-gradient(to bottom, #555555 0%, #333333 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
}

<击>

  

这是使用带有meteor的nemo64：bootstrap less package

您应该阅读包含一些示例的https://github.com/Nemo64/meteor-bootstrap/issues/4。

@ nemo64 wrotes：

  

虽然可以使用bootstrap mixins和变量   custom.bootstrap.import.less只包含mixins和变量   所以你可以随意导入它。

所以你应该在调用mixin之前导入custom.bootstrap.import.less。

<强>更新

  

so..shouldnt #gradient＆gt; .vertical（＃ff0000，＃00ff00,50％，50％）;工作？

是的，它应该。实施例

在meteor create test-app之后执行cd test-app，然后运行meteor add nemo64:bootstrap less。

现在创建一个空custom.bootstrap.json，您的文件结构应该如下所示：

├── custom.bootstrap.json
├── test-app.css
├── test-app.html
└── test-app.js

运行meteor命令后，您的文件结构应如下所示：

├── custom.bootstrap.json
├── custom.bootstrap.less
├── custom.bootstrap.mixins.import.less
├── test-app.css
├── test-app.html
└── test-app.js

然后创建一个gradient.less文件，其中应包含以下Less代码：

h1 {
#gradient > .vertical(#ff0000, #00ff00, 50%, 50%);
}

再次运行meteor命令，现在http://localhost:3000/上的应用应如下图所示：