使用VS Code处理Sass/Scss

安装插件

vscode 插件商店内搜索安装插件DartJS Sass Compiler and Sass Watcher

在项目中，使用.scss / .sass的后缀命名文件，当手动保存时就会生成对应的css文件，默认生成.css、.min.css和对应的map文件

插件配置使用

1. 进入设置页

在扩展页点击扩展设置进入扩展设置页
或者点击vscode菜单文件->首选项->设置，然后过滤框输入@ext:codelios.dartsass，即可进入如下设置页

2. 几个设置项整理解释

我在插件页整理了一些解释，根据自己的情况设置即可

设置id	解释
dartsass.debug	默认值：false。仅适用于此扩展的开发人员。如果您是最终用户，可以完全忽略这个。
dartsass.disableAutoPrefixer	默认值：false。关闭自动前缀功能。
dartsass.disableCompileOnSave	默认值：false。禁用每次保存时编译。
dartsass.disableSourceMap	默认值：false。禁用生成*.map文件。不过默认情况下Source Maps还是会被生成（只是没有生成文件）。
dartsass.enableStartWithUnderscores	默认值：false。启用以下划线开头的文件的编译。
dartsass.encoding	默认值：utf8。源文件编码
dartsass.execPlatform	默认值：host。插件的运行平台，可以为host、linux、windows。 这个插件属性最好保持不变。如果您在Windows主机上工作，但在Linux平台上远程编辑文件，则更改此选项很有帮助。
dartsass.includePath	默认值：[]。为sass编译指定为includePath的目录集。重要提示：我们考虑到includePath中的空格有一些奇怪之处，目前不支持空格。因此，请确保包含路径同样不要有空格。
dartsass.nodeExePath	默认值：node.exe。设置node.exe的路径。重要提示：此属性仅适用于windows平台。在Linux上，此属性被完全忽略，根本不使用
dartsass.outputFormat	默认值：both。输出文件的格式，可能的值： cssonly - 仅生成未压缩的*.css minified - 仅生成压缩的*.min.css both - 生成两者。
dartsass.pauseInterval	默认值：3。在开始另一个scss编译之前暂停间隔（以秒为单位），以避免频繁编译并占用资源。
dartsass.sassBinPath	默认值：空字符串。监视功能在幕后启动sass命令行进程，并将几乎所有的监视功能委托给同一个。
dartsass.targetDirectory	默认值：空字符串。写入生成的css文件的目标目录，可以是绝对目录或相对于项目根目录的相对目录。

可以在settings.json使用设置

{
    "dartsass.disableSourceMap": true, // 关闭map文件输出
    "dartsass.outputFormat": "minified" // 仅输出*.min.css
}

3. 对单个文件夹取消监视

右键对应的文件夹，有DartSass: Sass Watch、DartSass: Sass Unwatch两个菜单项，点击Unwatch取消