使用外部框架的css mixins

如何基于现有的库使用css mixins？示例：考虑您想基于引导btn btn-success类创建新的CSS类。它看起来像：使用外部框架的css mixins

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

以下/萨斯能够做这样那样的事情，当你定义类btn或btn-success自己，但你如何对待它，当它来自自举（或其它CSS框架）？

来源

2014-09-05 shaft

嗯，总之，一般有你的类和框架中定义的类没有区别。但是恶魔细节：例如Bootstrap'.btn'没有被真正定义为一个独特的规则集，但它实际上是一些适用于几个（很多！）选择器的样式，散布在所有源中。所以当你试图将这些作为混合使用时，你很可能不会得到你期望的结果。欲了解更多详情，请参阅此集合的备注： – 2014-09-06 03:35:23

[1]（http://stackoverflow.com/questions/23840711/bootstrap-3-with-less-how-to-handle-bootstraps-nested-rules#comment36791109_23840711）， [2]（http://stackoverflow.com/questions/22983475/a-smarter-way-for-integrating-bootstrapor-even-from-another-less-css-file-clas#comment35124805_22983475）， [3]（ http://stackoverflow.com/questions/24113419/extending-bootstrap-3-less-btn-group-not-working/24125264#comment37200018_24113419）， [4]（http://stackoverflow.com/a/24240819/ 2712740） – 2014-09-06 03:36:07

问题是，究竟是什么？你试过这个吗？有错误吗？ – cimmanon 2014-09-06 18:34:51

如果您可以将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

少的:extend(all)和相关文档链接说明在this answer

由于CSS是有效的少，你就不必做任何其他更改为您的样式表。好的，那么如何将LESS编译添加到您的工作流？最简单的解决方案在更短的"Command Line Useage" documentation，这可以归结为安装less（一次）

$ npm install less -g

，然后运行lessc描述的那样，以下的C ompiler

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

来源

2016-09-13 17:20:29 henry

使用外部框架的css mixins

回答

相关问题