Bootstrap 3 中的 Bootstrap 的 LESS 渐变混合？ [关闭]答案

【问题标题】：Bootstrap's LESS gradient mixins in bootstrap 3? [closed]Bootstrap 3 中的 Bootstrap 的 LESS 渐变混合？ [关闭]
【发布时间】：2013-11-11 02:42:57
【问题描述】：

@btn-font-weight:     normal;
@btn-default-color:   @brand-primary;
@btn-default-bg:      .#gradient.vertical(@brand-primary; @brand-secondary; 0%; 10%);   
@btn-default-border:  #ccc;

【问题讨论】：

这不是一个很清楚的问题。也许你可以更好地解释你到底想要什么。现在我发布了一个答案，展示了如何使用 #gradient > .vertical() mixin 的示例。

标签： less twitter-bootstrap-3 mixins

【解决方案1】：

您不能将 LESS mixin 输出保存到变量中。 Mixins 旨在混合到规则中。阅读更多LESS: here。

此外，bootstrap @btn-default-bg 包含一种颜色，例如 .button-variant() mixin 使用该颜色来设置 background-color 属性，因此它不能包含渐变。

因此，要使用 bootstrap mixin 为渐变背景制作按钮，您可以尝试以下方法（这里我制作了一个简单的渐变按钮 mixin，您可以在按钮中使用）：

.gradient-button(@color, @borderColor, @startColor, @endColor, @startPercent, @endPercent, @degradeColor: @startColor) {
  color: @color;
  border-color: @borderColor;
  background-color: @degradeColor;
  #gradient > .vertical(@startColor, @endColor, @startPercent, @endPercent));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners

  &:hover,
  &:active {
    color: @color;
    border-color: darken(@borderColor, 12%);
    background-color: darken(@degradeColor, 8%);
    #gradient > .vertical(darken(@startColor, 8%), darken(@endColor, 8%), @startPercent, @endPercent);
    .reset-filter();
  }
}

然后你可以像这样在你的按钮中使用这个 mixin：

/* your default button */
.btn-default {
  .gradient-button(@brand-text-color, @brand-border, @brand-primary, @brand-secondary, 0%, 10%);
}

或者您可以在 theme.less 文件中查看.btn-styles() mixin 是如何设计和使用的。

mixin 可以在其他按钮中重复使用，例如危险、成功或信息按钮。但是您可以以相同的方式（而不是构建 mixin）直接在按钮规则中使用引导渐变 mixin - 如果您只是定义一个按钮。

要获得更多想法，您可以查看 button.less 文件或在 mixins.less 中查看 .button-variants() mixin 并了解如何制作上述内容mixin 还添加了一些额外的类，如.disabled 等。

【讨论】：

Martin，你的回复很简短，很有描述性。现在我将编写自己的 mixins，或者我会使用更少的元素，并会告诉你我是如何实现的。