Question

如果给出，我需要扩展Bootstrap 3 Button Variant mixin以获取特定的悬停颜色。 IE：

.button-variant(@color;@background;@border;@hoverColor: false) {
        ...
    &:hover,
    &:focus,
    &:active,
    & .active,
    .open. dropdown-toggle& {
        color: @color;

// out of LESS

     if (@hoverColor) {
         background-color: @hoverColor;
     }
     else {
         background-color: lighten(@background, 8 % );
         border-color: darken(@border, 12%);
     }

//回到LESS

    }
    ...
}

Answer 1

守卫mixin 与iscolor()可以胜任。

（实际上，第一个示例 - http://www.lesscss.org/页面顶部的所有内容都使用此功能，但在页面的下方，您还可以找到有关此主题的更多信息）

所以，在你的例子中，你可以尝试这个方向：

.button-variant(@color;@background;@border;@hoverColor: false){
  &:hover,
  &:focus,
  &:active,
  & .active,
  .open .dropdown-toggle {
    color: @color;

//全部在LESS

    .bg() when (iscolor(@hoverColor)){
      background-color: @hoverColor;
    }
    .bg() when not (iscolor(@hoverColor)){
      background-color: lighten(@background, 8%);
      border-color: darken(@border, 12%);
    }
    .bg();

//仍然在LESS; - ）

}
}

测试1：

test {
  .button-variant(red, green, blue, black);
}

返回：

test:hover,
test:focus,
test:active,
test .active,
test .open .dropdown-toggle {
  color: #ff0000;
  background-color: #000000;
}

测试2：

test {
  .button-variant(red, green, blue);
}

返回：

test:hover,
test:focus,
test:active,
test .active,
test .open .dropdown-toggle {
  color: #ff0000;
  background-color: #00a900;
  border-color: #0000c2;
}

Answer 2

如果您需要这样做而不修改Bootstrap文件，您可以使用附加参数定义新的.button-variant专门化，例如：

.button-variant(@color, @background, @border, @hover) {
    // re-use default mixin styles:
    .button-variant(@color, @background, @border);
    // override hover stuff:
    &:hover,
    &:focus,
    &:active,
    &.active,
     .open > .dropdown-toggle& {
        background-color: @hover;
    }
}

因此，当使用三个参数调用mixin并且您的实现用于四个参数调用时，将使用默认的Bootstrap mixin。（参见Pattern-matching - ＆gt; args arity示例。）

如果提供，请使用颜色变量，否则使用颜色功能

2 个答案: