使用外部框架的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

回答

相關問題