button - 将类悬停状态导入 .LESS 中的其他类

Question

只是在我的项目中学习 .less 并使用 twitters bootstrap。

如果我想要一个绿色按钮来提交表单，我必须写：

<input type="submit" value="submit" class="btn btn-success" />

但我将能够跳过输入标签中的类属性。

我不会更改 twitter 引导文件。我将在我的 default.less 文件中重载它们，如下所示：

button, input[type="submit"]{ .btn; .btn-success; }

但是然后我没有获得按钮的悬停状态和活动状态，如果我尝试像这样，我会得到错误：

button, input[type="submit"]{/* previus code... */ &:hover{ .btn:hover; }}

你可能会注意到我试图完成的事情。我知道我可以在 jquery 或 javascript 中执行此操作，但我将能够在我的 .less-file 中执行此操作，而无需触及原始 bootsrap 文件。

score 0 · Accepted Answer

如果不修改 Bootstrap CSS，我不确定这是否可行。

你能修改引导 CSS 吗？如果是这样，您可以添加一个.btn-hover类.btn:hover，然后在button, input[type="submit"]：

&:hover {
    .btn-hover;
    .btn-success-hover;
}

score 0 · Accepted Answer

.btn 和 .btn-success 是类。这些类在buttons.less 中定义。他们从 mixins.less 调用 mixin，称为 .buttonBackground。你可以为你的按钮调用这个 mixin：

button, input[type="submit"]{
     .buttonBackground(@startColor,@endColor);
}

@startColor 和@endColor 用于按钮渐变，悬停状态使用@endColor。或者您可以将 variables.less (btnInfoBackgroundHighlight) 中的颜色更改为您自己的颜色。或者你可以使用

.btn-success{
      &:hover{
           background-color: @yourOwnColor;
      }
}

2 回答 2