JetBrains 系列开发工具，如何配置 SCSS File Watcher ，相关输出配置参数详解：webStorm phpStorm IDEA

前言

你目前已经了解了如何使用 SCSS 进行开发，了解了该文章的内容：『 SCSS 日常用法 』
在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 FileWatcher 』
让我们来了解一下 sass 这个程序的相关参数。

一、避免输出窗口上下跳动

1. 情形

在使用中你可能会遇到这样的情况，每次修改 scss 文件的时候，过程中开发工具会不停的试图进行编译，在你编辑的过程中可能会出错。出错就会导致窗口底部的输出提示框展开，无错误的时候就会闭合。
这样，就会出现底部窗口上下不停浮动的情况，很是烦人，如图：

2. 解决

我们来说说如何避免这种情况
在配置 scss 的 FileWatcher 的时候，展开下面的高级配置面板[Advanced Options]，找到 [Show Console] 配置控制台展显示信息的触发条件，选择 [Always]，也就是一直显示，就会不会乱跳了。如果需要，把下面的窗口调到最小即可。

还有一种方式，如果你有两个屏幕，可以把输出窗口放到另一个屏幕上：
点击输出窗口的右上角齿轮，如图选择 [Float] 即可，效果如下图

二、不输出 .map 文件

不做任何设置的时候，你新建的 FileWatcher，在编译 scss 的时候会自动生成对应的 .map 文件，如图：

这个文件的目的是：在你浏览器查看元素样式的时候，会自动对应到相应的 scss 文件上。
其实是有用的，但有时候我们不需要这个文件，这样设置：

在这之前我们需要先看一下 sass 这个编译程序的相关参数：

1. 查看 sass 版本

打开 terminal ，先输入 sass --version，就可以看到自己的版本，我的是 v3.7.4

Kyle@Kyles-MBP ~ % sass --version
Ruby Sass 3.7.4

2. 查看这个版本的 sass 帮助信息

不同版本的 sass，相关的配置可能是有不同，所以这里需要查看一下你所使用的 sass 的帮助信息

sass --help

就可以看到关于它的相关配置说明，这里对于 .map 文件的配置有四个选项： auto file inline none

Input and Output:
        --scss                       Use the CSS-superset SCSS syntax.
        --sourcemap=TYPE             How to link generated output to the source files.
                                       auto (default): relative paths where possible, file URIs elsewhere
                                       file: always absolute file URIs
                                       inline: include the source text in the sourcemap
                                       none: no sourcemaps

3. 添加配置参数

打开 SCSS 的 FileWatcher，在 Arguments 一栏中追加这个内容： --sourcemap=none ，保存应用即可，就不会再生成 .map 文件了

三、控制输出的 .css 代码显示样式

1. 查看帮助信息

还可以调整输出 .css 文件的内容样式，从帮助信息中可以看到对应的配置信息：

Common Options:
    -I, --load-path PATH             Specify a Sass import path.
    -r, --require LIB                Require a Ruby library before running Sass.
        --compass                    Make Compass imports available and load project configuration.
    ### 我们只需要这个配置选项 --style
    -t, --style NAME                 Output style. Can be nested (default), compact, compressed, or expanded.
    -?, -h, --help                   Show this help message.
    -v, --version                    Print the Sass version.

-t 和 --style 的写法是等价的
它可选的配置参数有4个：

参数	说明
nested （默认）	根据层级结构进行缩进
compact	各个 class 都会压缩到一行中
compressed	全部 css 压缩到一行中
expanded	完全展开的状态，没有缩进

2. 配置 FileWatcher

打开 FileWatcher 窗口，在 Arguments 一栏中追加： --style compact

3. 不同参数的输出结果对比

nested：有缩进

compact：压缩到各行

expanded：完全展开

compressed：压缩到一行中