将类悬停状态导入 .LESS 中的其他类答案

【问题标题】：Import classes hover state to other classes in .LESS将类悬停状态导入 .LESS 中的其他类
【发布时间】：2012-04-21 21:47:54
【问题描述】：

刚刚学习 .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 文件。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

.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;
      }
}

【讨论】：