许多SCSS/SASS文件到一个CSS文件？

问题描述：

是否可以让sass监听一个包含许多sass文件的目录并生成一个CSS文件？我已经找到一种方法通过包括许多SASS文件合并成一个（style.scss）：许多SCSS/SASS文件到一个CSS文件？

@import "scss/header"; 
@import "scss/footer";

然后运行下面的代码：

sass --watch style.scss:style.css

但问题是，我必须改变该文件在生成一个新的CSS文件之前。

答

如果您看到该目录，sass将能够注意到@imported文件中的更改，并更新相关文件。

style.scss：

@import "header"; 
@import "footer";

，做：

sass --watch .

这将编译到的.css目录中的所有文件;忽略名称以_开头的文件。

我修改了_header.scss或_footer.scss，如果还会更新style.scss。

您也可以在其他目录输出：

sass --watch .:output_dir/

谢谢！它像一个魅力。 – voigtan

请您澄清一下吗？ “标题”和“页脚”是他们header.scss？或header.css？并且它们位于子文件夹或与screen.scss相同的文件夹中？ – Alisso

如果部分文件位于不同的文件夹中，该怎么办？我有这种情况，不能移动我的CSS文件，因为我不得不在这种情况下做出很多改变。是否仍然可以改变一个部分，然后创建一个新的CSS主文件？ – user2718671

答

你可以告诉SASS与观看整个文件夹：

sass --watch application/sass:public/stylesheets

如果您导入所有的部分文件，这应该生成一个文件。每次在文件夹中编辑文件时，CSS文件都会自动生成。

，将工作到，这两种解决方案是很好的。但我的目标是总共只有一个CSS文件，并且_和一个包含其他所有内容的scss文件对我来说是最好的解决方案。谢谢你的回答，2天后，我真的很喜欢它的所有功能！ – voigtan

答

只想添加，您也可以拨打其他文件中的变量（$）和混合类型。

例如：

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}

custom.scss：

@import "_variables.scss"; 
@import "_header.scss"; 
@import "_footer.scss";

输出= custom.css

header {color:#000;} 
footer {background:#000;}