css - 如何在 {less} 中扩展 Bootstrap 类？

Question

我显然是新手，对新手问题不太了解。我正在尝试制作一个可以在我的整个站点中使用但正在使用 Bootstrap 的通用 CSS。例如，我想使用 Bootstrap 的面板类。目前我们在几个地方使用“.panel-primary”类。但是，如果我们决定要使用不同的颜色，如“.panel-default”，我不想去所有可能有几个面板的页面来进行更改。相反，我希望创建一个通用的 CSS 类来继承 Bootstrap 类，这样我就只有一个位置可以进行更改。

有人建议我为此考虑使用 less 或 SAAS，从我所看到的基础知识来看，我认为 less 是我所需要的。

我使用的是 ASP.Net MVC 元素，所以我使用 NuGet 安装“dotless”。然后，我将我的 css 文件更改为 site.less，看起来好像可以正常工作。现在我正在尝试使用扩展来做我想做的事，但我显然遗漏了一些东西，因为 CSS 没有应用 Bootstrap 类。

这是我最初使用的 Bootstrap 类。

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

这是我尝试减少使用并将其应用到我的页面的尝试。

.vtc-panel{
    &:extend(.panel);
    &:extend(.panel-primary);
}

<div class="vtc-panel">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

更新

这是我尝试过但仍然无法正常工作的其他一些方法。

首先，我想也许它没有看到 Bootstrap 文件，所以我在 less 文件的顶部做了一个@import。这似乎适用于包含 Bootstrap，但我随后尝试对 css 类进行以下更改，但它仍然没有应用 Bootstrap 样式。

@import (inline) '../Content/bootstrap.min.css';

.vtc-panel:extend(.panel, .panel-primary){

}

Answer 1

所以经过更多的挖掘之后，我终于让它工作了。我正在传递它，希望它能帮助其他人。这假设您有 LESS 安装和设置。

需要做的第一件事是将您的 Bootstrap 文件更改为 less。将 bootstrap.min.css 重命名为 bootstrap.min.less。这将 Bootstrap 通过 LESS 编译引擎。

然后将 Bootstrap 文件导入到您的主 LESS 文件中。我把它放在我的 site.less 文件的顶部。

@import (inline) '../Content/bootstrap.less';

然后在我的 site.less 文件中，我添加了一个名为“vtc-panel”的类，并从 bootstrap 继承了“panel”类。

.vtc-panel{
    .panel;
    .panel-primary;
}