使用多个SASS文件

Question

我想将我的（庞大的）全局CSS文件拆分成多个文件。我正在使用Sass。有没有一种简便的方法让Sass监视多个文件？我认为可以使用@import，但只是想知道是否有另一种（更好的）方法。

提前谢谢。

- Chris

---

监听文件：sass --watch public/stylesheets/sass:public/stylesheets。这将监视 public/stylesheets/sass 中的所有 .scss 文件，并将它们写入到 public/stylesheets/ 作为 .css 文件。 - Zabba

我认为这实际上是最好的解决方案，因为它允许使用单独的CSS文件。谢谢。 - Chris

Answer 1

Rich Bradshaw提到的是正确的，但这里还有另一种方法，您可以采用。

创建一个名为combined.scss的scss文件（例如），然后在该文件中@import所有你的scss文件，最后运行sass --style compressed --watch combined.scss:combined.css，它将检测到导入的scss文件的更改并根据需要重新编译。

Combined.scss示例：

@import "reset";
@import "layout";
@import "styles";
@import "ie";

因此，当您对layout.scss文件进行更改时，combined.scss将重新编译，并且您所有实际的HTML页面所需引用的只是combined.css。

但正如我所说，Rich Bradshaw的解决方案同样有效，具体取决于您正在处理的项目可能更适合使用哪种。

- Jannis

---

太好了，很高兴能帮忙。我忘记提到的一件小事是，如果您直接引用@mixins，则只有在文件中才能使用它们。因此，如果您要为您的mixins创建单独的文件，则请确保每个需要访问它的文件都将@import“mixin”；作为其第一行（例如在layout.scss和styles.scss中）。 - Jannis

另外需要注意的是：当你在额外的样式表前加下划线（例如“_reset.scss”）时，Sass不会将它们编译为css。如果你在combined.scss中使用@import "reset.scss"（这里可以省略下划线）来引入它们，则只有combined.scss会被编译，即使其中一些包含的scss文件已更改。 - acme

Answer 2

我使用import，然后转到我的媒体目录，其中包括一个名为css的目录，其中包含所有我的css，并运行。这将从许多scss文件中生成一个css文件。

要澄清这一点，如果您将导入的文件命名以下划线开头，则SASS不会尝试编译这些文件。

因此，如果您有一个名为style.scss的文件，其中包含以下行：

@import 'reset';
@import 'blog';

一些名为_reset.scss和_blog.scss的文件意味着当您运行上述命令时，它将生成一个名为style.css的文件，其中包含所有其他文件。在更高层次声明的变量也同样有效。

- Rich Bradshaw

---

谢谢你提醒文件名要以下划线开头，我忘记了这一点，这正是我需要的！ - Pierre-Adrien

一个事情... "下划线只是告诉Sass在编译时不要创建CSS文件。这并不意味着“嘿，完全忽略这个文件的内容。”- @cimmanon 在https://dev59.com/kmrXa4cB1Zd3GeqPBrH6中。 - luigi7up