合併多個CSS預處理器

Question

我們在生產中有數百個.less文件，但也想開始合併.scss文件。

我是否需要讓我自己的文件類型，以編制複式類型的CSS預處理程序文件，或者是有已經是一個辦法做這樣的事情：

@import 'less-styles.less'; 
@import 'scss-styles.scss'; 
@import 'stylus-styles.styl'; //potentially 

由此產生一個CSS文件中該訂單。

Answer 1

由於有效的CSS代碼也有效代碼較少，您可以先將SCSS和手寫筆文件編譯爲CSS並導入。

sass scss-styles.scss scss-styles.css 

比你更少的代碼：

@import (less) scss-styles.css 

以上less關鍵字的作用：

少：將這個文件看作一個都不能少文件，不管是什麼文件擴展名

以上意味着你可以擴展和混合C更少代碼中的scss-styles.css文件的SS選擇器。

請注意，來自scss-styles.css文件的變量和mixin不能在Less中重新使用。

如果你也需要變量和mixins，唯一的解決方案似乎是to convert your SCSS to Less。另請參閱：https://github.com/bassjobsen/grunt-scss2less

您應該可以對觸筆（.styl）文件執行相同的操作。

Answer 2

到目前爲止，我還沒有看到任何工具可以讓開發人員交叉引用來自Sass的LESS mixins，或者通用工具。

這並不意味着你不能在同一個站點中使用多個預處理器，它只是意味着你將限制它們如何進行交互。通過連接和縮小工具，您可以單獨構建LESS和Sass，然後將它們合併到單個文件中以縮小。

說了這麼多，我高度不鼓勵這種方法。選擇一個項目的技術，並堅持下去。這樣您就可以充分利用手頭的工具，只需要擔心單個技術生命週期（更新，API更改等）。