less -如何在LESS中引用引导css类？

Question

我想在一个较少的类中引用多个css类，但我一直收到以下错误，知道我在这里做错了什么吗？我是个新手，所以如果有更好的选择来实现这一点，我也很乐意尝试。

NameError: .btn is undefined
in qx.less on line 2, column 2:

这是我的设置

<link rel='stylesheet'         href='/webjars/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel="stylesheet/less"    href='/assets/less/qx.less'>
<script type='text/javascript' src='/webjars/less/1.7.0/less.min.js'></script>

qx.less的内容-在这里我试图创建qx按钮，它结合了.btn和.btn-成功的引导。

#qx-button {
    .btn;
    .btn-success;
}

Answer 1

你没有把属性..。或者，您应该删除选择器.btn && .btn-success

#qx-button{

.btn{
   background-color: #22f;
}
.btn-success{
  border: 3px solid #23e;
}

}

Answer 2

与在Html文档上相比，您可以使用不同的HTML元素，如'span‘而不是'button’

original :：这将使用引导css

<button class="add_to_cart btn btn-success">
   <i class="fa fa-shopping-cart"></i>
   My name is Hemant
</button>

modified:：这将是自定义的

<style type="text/css">
//THis will go to your less file
span#qx-button.btn.btn-success{
    background-color: #f44;
}
</style>

<span id="qx-button" class="btn btn-success">
  Hello How are you?
</span>

#id是可选的(你并不真的需要它)，你可以写下

 <style type="text/css">
    span.btn.btn-success{
        background-color: #f44;
    }
    </style>

<span class="btn btn-success"></span>