WebStorm中如何配置SCSS

WebStorm是一款很优秀的用于前端开发的IDE，用于开发基于HTML、CSS、JS等的应用时非常应手，当然JetBrains旗下的其他IDE，如PHPStorm也支持编写HTML、JS等语言，但是术业有专攻，开发前端应用WebStorm在代码提示补齐等方面显得更加专业。WebStorm甚至被称为“前端开发神器”、“最智能的JavaScriptIDE”等等。

SCSS是一种功能强大的CSS预处理器，在编写较大应用时，经常会造成选择器的层叠度过高等问题，因此推荐使用SCSS预处理器来进行CSS的开发，SCSS提供的变量、嵌套、混合、继承等特性，使得CSS的编写更加高效和有趣。

本文主要讲解如何在WebStorm中配置SCSS的方法，关于WebStorm和SCSS的相关介绍，不再赘述。当然在PHPStorm等其他JetBrains旗下的软件中，SCSS的配置方法相同或基本一致。

新建项目，并打开设置菜单：

左上角【文件】-->【设置】，或直接按CTRL+ALT+S快捷键打开WebStorm的设置菜单。

打开【设置】面板后，选择【工具】进入，File Watchers菜单，点击左下角的“+”号按钮。

选择SCSS模板

弹出的面板即是我们要配置的面板。在弹出的配置面板中，我们仅需要修改参数一项即可，其余的按默认即可。

在参数一栏中，有两种常见的配置方法：

--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css --trace  --style compressed
--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css --trace  --style compact

顾名思义，compressed是压缩的，compact为更近一步压缩的。事实上style属性，有四种可设置值，分别是：nested，expanded，compact，compressed。一般我们都选择后两种，具体每种设置之间的区别，建议大家配置完成后在实际项目中直接进行体验。

输出路径中，如果我们不需要webStorm帮我们生成map文件，则设置为： $FileNameWithoutExtension$.css即可。