更少-如何在更少的時間內引用bootstrap css類？

Question

我想在少一個類中引用多個CSS類，但是我不斷遇到錯誤，知道我在這里可能做錯了什么嗎？ 我是LESS的新手，因此，如果有更好的選擇可以實現這一目標，我也很樂意嘗試一下。

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的內容-在這里我試圖創建結合了.btn和.btn-bootstrap成功的qx-button。

#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”）

原始::這將使用引導CSS

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

修改：：將對此進行定制

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