Css LESS extend（）不工作

我想为我的应用程序按钮编写一个类“selected”。 当一个按钮“选择”了类时，它的外观和感觉应该与引导的“btn主”相同

引导css定义（例如）：

我写我的课程如下：

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

1） 它应该是这样工作的吗

2） 如果1）为是，则我的css不起作用。所选类不从btn主类继承颜色和背景色

更新

我的一些标记：

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

我的主文件：

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

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

---

显然，如果我在标记中给按钮class.btn primary。。。它只是工作。

当我们简单地导入带有

.CSS

扩展名的CSS文件时，它将被视为CSS，而

@import

语句保持原样

要使

extend

功能正常工作，Less编译器必须将导入的文件解释为Less文件。这可以通过以下两种方式实现：

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

选项1:（使用指令）

使用

（reference）

指令，只允许从外部引导库中拉入目标/引用的样式。因此，它将产生一个较小的文件，并且当您打算只引用大型库中的少数样式（如引导）时，它将是首选。请注意，此指令仅在v1.5.0版本较少的情况下引入，因此在较低的编译器版本中不起作用

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

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

---

选项2:（使用指令）

当使用

（less）

指令时，less编译器会将导入文件中的代码视为less代码（不考虑文件扩展名），从而允许扩展其中指定的任何规则集/类。但是，使用此指令的缺点是，

.css

文件的全部内容（包括输出文件中可能不需要的类）将复制到输出。这是在Less v1.4.0中引入的

@import (less) 'bootstrap.css';

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

---

是的，它应该可以工作并成功编译。您能否创建一个示例演示，看看哪里出了问题？CodePen、CSSDeck等将允许您使用较少的代码创建演示。使用真实代码片段更新我认为您无法从CSS文件扩展。您可能应该尝试从

less

文件夹导入

bootstrap.less

文件。注意：对于Less的v1.5.0，您还可以使用

（reference）

指令来避免在结果文件中获取所有引导类。我导入了bootstrap.Less，它成功了。对不起，非常感谢！将其添加为answer实际上刚刚设法发现您可以扩展

.css

文件，但这应该通过import语句中的

（less）

指令来完成。我将在答案中添加两者。您也可以将两者结合起来引用一个文件，并将其视为一个较小的文件

@import（reference，less）../sass/compiled/bootstrap.css'
@import (less) 'bootstrap.css';

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