1. 确认安装Sass
在WebStorm中编译Sass需要先确认已经安装了Sass，可以通过命令行输入以下命令检查是否已经安装:
sass --version如果已经安装，会输出Sass的版本号。如果没有安装，则需要先安装Sass。
2. 创建Sass文件
在WebStorm中，可以在项目中创建一个Sass文件来编写Sass代码。可以右键点击项目文件夹，选择“New” -> “Style Sheet”，并选择“Sass”文件类型来创建一个Sass文件。另外，也可以直接在WebStorm中创建一个新的Sass文件。
3. 配置Sass编译
3.1 配置Sass编译器
在WebStorm中，需要配置一个Sass编译器来编译Sass代码。可以在WebStorm的“Settings”中配置Sass编译器。
进入WebStorm的“Settings”，找到“Tools” -> “File Watchers”，点击“+”按钮，选择“Sass”。
在“Sass”文件监视器的配置界面，可以看到如下选项：
“Arguments”：要传递给Sass编译器的参数。
“Output paths to refresh”：要刷新的输出路径。
“Scope”：对哪些文件应用此监视器。
可以将“Arguments”设置为--no-cache --update $FileName$:$FileDir$/css/${FileNameWithoutExtension$}.css来编译Sass代码，并将编译结果输出到与源文件同名的.css文件中。
可以将“Output paths to refresh”设置为$FileDir$/css/${FileNameWithoutExtension$}.css来刷新编译结果的输出路径。
可以将“Scope”设置为“Project Files”来适用此监视器于项目中的所有文件。
配置完成后，可以点击“OK”来保存设置。
3.2 启用Sass编译器
在WebStorm中，可以通过启用“File Watchers”来启用Sass编译器。可以在WebStorm的“Settings”中启用“File Watchers”。
进入WebStorm的“Settings”，找到“Tools” -> “File Watchers”，确保已经勾选了“Auto-save edited files to trigger the watcher”。
启用“File Watchers”后，每当Sass文件发生变化时，WebStorm会自动编译Sass代码，并将编译结果输出到指定的输出路径中。
4. 编写Sass代码
在WebStorm中，可以编写Sass代码并保存到Sass文件中。在保存Sass文件时，WebStorm会自动触发Sass编译器，将Sass代码编译成CSS代码，并输出到指定的输出路径中。
以下是一个简单的Sass代码示例：
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
&__header {
background-color: #333;
color: #fff;
padding: 20px;
}
&__content {
padding: 20px;
}
&__footer {
background-color: #333;
color: #fff;
padding: 20px;
}
}
以上Sass代码定义了一个.container类，其中包含了三个子类：.container__header、.container__content和.container__footer。编译后的CSS代码如下所示：
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.container__header {
background-color: #333;
color: #fff;
padding: 20px;
}
.container__content {
padding: 20px;
}
.container__footer {
background-color: #333;
color: #fff;
padding: 20px;
}
可以看到，Sass代码可以更加简洁易读地定义CSS样式。
总结
在WebStorm中配置Sass编译非常简单，只需要确认安装了Sass，创建Sass文件，配置Sass编译器，并启用“File Watchers”，就可以编写并自动编译Sass代码了。
Sass代码可以更加易读和易维护，是Web开发中的一种有用的工具。通过WebStorm，编写和编译Sass代码非常方便快捷。