减少来自不同 CSS 个文件的引用类

Question

我正在创建一个使用 Bootstrap 的 HTML/CSS 页面。事实上我必须定制一些部分。由于多种原因，一些 class 名称与 Bootstrap 中的原始名称不匹配。所以，我有两个文件。 bootstrap.min.css 和 main.less (=>main.min.css)。我想知道是否可以将 main.less 中的 classes 匹配到 bootstrap.min.css。所以，我有一个 class .orderby（在 main 中），它应该具有与 .form-control (bootstrap) 相同的设置。像这样：

.orderby { @.form-control }

但我不知道如何引用另一个 css 文件。

如果有人能指出正确的功能，我将不胜感激。谢谢！

Answer 1

您可以使用 LESS 的 extend "all" 来做到这一点。通用形式是 :extend(<indentifier> all) {}。在你的情况下，你会做

.orderby {
    &:extend(.form-control all) {}
    <your additional styles>
}

此外，如果您不需要使用所有 Bootstrap，您可以使用 LESS 的 reference:

只导入您需要的位

@import (reference) path/to/bootstrap

将其与上面的 extend 代码结合起来，您将只引入 Bootstrap 的 .form-control.

减少来自不同 CSS 个文件的引用类

Less refer classes from different CSS files

css

nested

class

less

twitter-bootstrap

减少来自不同 CSS 个文件的引用 类

Less refer classes from different CSS files

css

nested

class

less

twitter-bootstrap

减少来自不同 CSS 个文件的引用类