less - Bootstrap 3 中的 Bootstrap 的 LESS 渐变混合？

Question

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

Answer 1

您不能将 LESS mixin 输出保存到变量中。Mixins 旨在混合到规则中。阅读有关LESS 的更多信息：这里。

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

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