组合多个CSS预处理器

Question

我们生产了数百个.less文件，但也希望开始合并.scss文件。

我是否需要创建自己的文件类型才能编译多种类型的CSS预处理器文件，或者是否已经有办法做这样的事情：

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

按顺序生成一个CSS文件。

Answer 1

由于有效的CSS代码也是有效的更少代码，您可以先将SCSS和stylus文件编译为CSS并导入。

sass scss-styles.scss scss-styles.css

比你的Less代码：

@import (less) scss-styles.css

上面的less关键字确实：

  

less：无论文件扩展名是什么，都将文件视为Less文件

上述意味着您可以在Less代码中的scss-styles.css文件中扩展和混合CSS选择器。

请注意，scss-styles.css文件中的变量和mixins不可用于Less中的（重新）使用。

如果您还需要变量和mixins，唯一的解决方案似乎是to convert your SCSS to Less。另见：https://github.com/bassjobsen/grunt-scss2less

您应该可以为手写笔（.styl）文件执行相同操作。

Answer 2

到目前为止，我还没有看到任何工具可以让开发人员交叉引用Sass的LESS mixins，或者反之亦然。

这并不意味着您无法在同一个网站中使用多个预处理器，这只意味着您将受限于他们的互动方式。使用连接和缩小工具，您当然可以单独构建LESS和Sass，然后将它们合并到一个缩小的文件中。

尽管如此，我强烈反对这种做法。为项目选择一项技术，并坚持下去。这样您就可以充分利用手头的工具，只需担心单个技术生命周期（更新，API更改等）。