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的内容 - 这里我试图创建qx-button，它结合了.btn和.btn-bootstrap的成功。

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

Answer 1

你没有放置属性......或者你应该删除选择器.btn＆amp;＆amp; .btn-成功

#qx-button{

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

}

Answer 2

与您的Html文档相比，您可以使用其他HTML元素，例如＆＃39; span＆＃39;而不是＆＃39;按钮＆＃39;

original ::这将使用bootstrap 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>

少 - 如何更少地引用bootstrap css类？

2 个答案: