合并多个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更改等）。