Question

我想写一个班级＆＃39;选择＆＃39;对于我的应用程序的按钮。当一个按钮具有Class＆＃39; select＆＃39;它的外观和感觉应该与Bootstrap＆＃39; btn-primary＆＃39;相同。

Bootstrap css定义（例如）：

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

我写了我的课程如下：

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

1）应该这样工作吗？

2）如果1）是，那么我的CSS不起作用。选定的类不会从btn-primary继承颜色和背景颜色。

更新

我的一些标记：

<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) {};
    }
}

较少延伸（）不起作用

1 个答案: