如何使用引导梯度混合？

Question

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

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

我试过#gradient.vertical()、#gradient > .vertical()等等等等。

我需要导入一些东西吗？

这是使用 nemo64:bootstrap less 包和流星

Answer 1

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

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

Answer 2

#gradient > .vertical(); 应该可以工作。确保你有@imported mixins。

对于引导程序，您可以同时导入 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);
}

这是使用 nemo64:bootstrap less 包和流星

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

@nemo64 写道：

bootstrap mixin 和变量是可用的 custom.bootstrap.import.less 仅包含 mixins 和变量 因此您可以根据需要随时导入它。

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

更新

所以..shouldnt #gradient > .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/ 上的应用应该如下图所示：