使用外部框架的 css mixins

Question

如何使用基于现有库的 css mixins？示例:假设您想基于 Bootstrap btn btn-success 类创建一个新的 css 类。它可能看起来像:

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

当你自己定义类 btn 或 btn-success 时，Less/Sass 能够做这样的事情，但是当它出现时你如何处理它来自 bootstrap(或其他 CSS 框架)？

Answer 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