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

Question

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

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

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

但是我将能够跳过输入标记中的 class 属性。

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

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

但是我没有获得按钮的悬停状态和事件状态，如果我尝试这样做，我会收到错误:

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

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

Answer 1

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

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

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