导入类将状态悬停在.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-file whitout中执行此操作，触摸orginal bootsrap文件。

Answer 1

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

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

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

Answer 2

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

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

@startColor和@endColor用于按钮渐变，悬停状态使用@endColor。 或者你可以改变variables.less（btnInfoBackgroundHighlight）中的颜色到你自己的颜色。 或者你可以使用

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