使用外部框架的 css mixins答案

【问题标题】：css mixins using an external framework使用外部框架的 css mixins
【发布时间】：2014-10-30 22:26:45
【问题描述】：

如何在现有库的基础上使用 css mixins？示例：假设您要基于引导程序 btn btn-success 类创建一个新的 css 类。它可能看起来像：

.disabled-button {
  @mixin .btn;
  @mixin .btn-success;
  @mixin .disabled;
  color:red;
}

当你自己定义类 btn 或 btn-success 时，Less/Sass 能够做这样的事情，但是当它来自引导程序（或其他 css 框架）时，你如何处理它？

【问题讨论】：

嗯，简而言之，一般来说，您的类与框架中定义的类没有区别。但魔鬼在细节中：例如 Bootstrap .btn 并没有真正定义为单个不同的规则集，但它实际上是一组应用于多个（很多！）选择器的几种样式，这些选择器分布在整个源代码中。因此，当您尝试将它们用作 mixin 时，您很可能不会得到您期望的结果。有关更多详细信息，请参阅此评论集：
1, 2, 3, 4
问题是什么，究竟是什么？你试过这个吗？有错误吗？
我一直在寻找一种方法来封装我的自定义类后面的引导程序等框架。例如。我可能想改天使用我的课程disabled-button 使用不同的框架（purecss），所以我的想法是我可以使用我的课程并使用 mixins 来解决这个问题。如果这不可能，则意味着 html 必须与手头的 css 框架耦合。这更像是一个关于 CSS 的架构问题。

标签： css twitter-bootstrap twitter-bootstrap-3 sass less

【解决方案1】：

如果您可以将LESS 编译添加到您的工作流程中，您可以使用其@import (reference) 和:extend(x all) 轻松实现此目的。无需了解有关 LESS 的更多信息，您就可以这样做

@import (reference) "bootstrap.less"; // this file is included with bootstrap. `(reference)` means it will only pull in the styles you ask it for, so you could continue using this even if you switch to another framework and don't want to include all of bootstrap
.disabled-button:extend(.button all, .button-success all, .disabled all) {} // pulls in the `.button` styles, `.button-success` styles, and `.disabled` styles
.disabled-button {color:red} // adds on your styles

LESS的:extend(all)解释及相关文档链接在this answer

由于 CSS 是有效的 LESS，因此您无需对样式表进行任何其他更改。好的，那么如何将 LESS 编译添加到您的工作流程中？ LESS 的"Command Line Useage" documentation 中描述了最简单的解决方案，归结为安装less（一次）

$ npm install less -g

然后运行lessc，less c编译器

$ lessc my-styles.less my-compiled-styles.css

【讨论】：