较少延伸()不起作用

Question

我想为我的应用程序按钮编写一个"选定"类.当一个按钮具有'选择'类时,它的外观和感觉应该与Bootstrap的'btn-primary'相同.

Bootstrap css定义(例如):

.btn-primary { background-color:#00F; color:#FFF; }

我写了我的课程如下:

button.selected:extend(.btn-primary) {};

1)应该这样工作吗？

2)如果1)是,那么我的CSS不起作用.所选类不会从btn-primary继承颜色和背景颜色.

UPDATE

我的一些标记:

<div class="filters">
        <div class="btn-group btn-group-lg type">
            <button type="button" class="btn selected" data-filter="all">
                <span class="glyphicon glyphicon-list-alt"></span>
                All
            </button>
            <button type="button" class="btn btn-default" data-filter="positive">
                <span class="glyphicon glyphicon-thumbs-up"></span>
                In
            </button>
            <button type="button" class="btn btn-default" data-filter="negative">
                <span class="glyphicon glyphicon-thumbs-down"></span>
                Out
            </button>
        </div>
    </div>

而我的LESS:

.filters {
            .type {
                button.selected:extend(.btn-primary) {};
            }
        }

我的主要文件少:

@import '../bower_components/bootstrap/dist/css/bootstrap.min.css';

@import "utils.less";
@import "flex.less";
@import "index.less";
@import "transactions.less";

显然,如果我在标记中给出了类.btn-primary的按钮......它就可以了.

Answer 1

当我们简单地导入带有.css扩展名的CSS文件时,它将被视为CSS并且@import语句保持原样.

要使该extend功能起作用,Less编译器必须将导入的文件解释为Less文件.这可以通过两种方式完成,它们如下:

选项1 :(使用(reference)指令)

使用该(reference)指令,只允许从外部引导程序库中提取目标/引用样式.因此,它会产生一个较小的文件,当你只想从一个大型库(如bootstrap)引用几个样式时,它是首选的.请注意,此指令仅在Less v1.5.0中引入,因此在较低的编译器版本中不起作用.

@import (reference) 'less/bootstrap.less';

.filters {
    .type {
        button.selected:extend(.btn-success) {};
    }
}

选项2 :(使用(less)指令)

使用该(less)指令时,Less编译器会将导入文件中存在的代码视为Less代码(无论文件扩展名如何),因此允许扩展其中指定的任何规则集/类.但是,使用此伪指令的缺点是.css文件的整个内容(包括输出文件中可能不需要的类)将被复制到输出中.这在Less v1.4.0中引入.

@import (less) 'bootstrap.css';

.filters {
    .type {
        button.selected:extend(.btn-success) {};
    }
}