sass编译_如何用崇高的文字编译Sass

在Sass系列的上一篇文章中，我们向您展示了如何使用命令行将Sass编译为常规CSS格式 。 但是，由于并非所有人都喜欢使用Terminal，因此这是使用Sublime Text进行操作的一个提示。

可以通过名为SassBuilder的插件将Subs转换为Sublime Text中CSS，您可以通过Package Control对其进行安装（请参见屏幕截图）。

配置文件

在编译Sass之前，您需要创建一个配置文件，该文件类似于在Compass项目中可以找到的config.rb 。 要创建文件，请转到Sublime Text中的Tools> Sass Builder Config 。 保存在您存储在同一文件夹中的文件.scss或.sass文件，并将其命名为.sassbuilder-config 。

然后，您可以在此文件中配置编译样式的输出，这是默认配置：

{
	"output_path": "../css",
	"options": {
		"cache":         true,
		"debug":         true,
		"line-comments": true,
		"line-numbers":  true,
		"style":         "nested"
	}
}

SassBuilder将生成注释和行号，这些注释和行号告诉我们选择器和样式规则的定义位置。 当您处于开发阶段时，这些功能很有用，但是当您要发布网站时，可能需要删除它们。 为此，将line-comment和line-number的值设置为false ，就像这样。

{
	"output_path": "../css",
	"options": {
		"cache":         true,
		"debug":         true,
		"line-comments": false,
		"line-numbers":  false,
		"style":         "compressed"
	}
}

style选项指定了已编译CSS的样式-您可以在Nested ， Expanded或Compressed之间进行选择。 保存文件后，Sass将自动编译为CSS。 如果该过程已成功完成，您将收到以下通知（屏幕截图）。

就是这样，伙计们。 我们希望您对本小教程有所帮助。 如有任何疑问，请随时在下面的评论中发布。

翻译自: https://www.hongkiat.com/blog/sublime-text-compiling-sass/