LESS - how to refer bootstrap css classes in less?

Question

I want to refer multiple css classes in one less class but I keep getting following error, any idea what I maybe doing wrong here? I newbie to LESS, so if there is any better option to achieve this, I would be happy to try it out as well.

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

Here is my setup

<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>

Content of qx.less - here I am trying to create qx-button which combines .btn and .btn-success of bootstrap.

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

Answer 1

You didn't put properties... or you should remove the selectors .btn && .btn-success

#qx-button{

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

}

Answer 2

Than on your Html document you could use a different HTML element like 'span' instead of 'button'

original :: this will use bootstrap css

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

modified:: this will be customized

<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>

The #id is optionnal (you don't really need it) you could write down

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

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