Sublime Text 配置 Sass

• Sass
• Sass Build 使用 Ctrl + B 快捷键编译
• SublimeOnSaveBuild 用于 Ctrl + S 保存文件的时候自动编译

　　Sass build属于手动编译的，安装完成后，保存sass源文件，然后按快捷键Ctrl+B (Linux/Windows) or Command+B (OS X)可编译Sass为CSS，还会有一个.map文件。

　　SublimeOnSaveBuild能够实现保存自动编译，是不是方便多了呢，不过前提我们需要设置好自动编译文件类型以及文件路径，否则你保存自动编译都会报错的。

接下来告诉大家怎么设置，比如我现在需要设置sass源文件.scss格式来实现自动编译，点击“工具”》“编译系统”“新编译系统”。如下图操作：

 

新建一个文件，我们可以复制一下代码，根据你的项目目录进行设置相关路径：

{
"cmd": [
"sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache",
"&&",
"postcss", "--use", "autoprefixer", "${file_path}/../css/${file_base_name}.css", "-d", "${file_path}/../css"
],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}

一般保存格式是.sublime-build后缀的，比如我这里保存的是scss.sublime-build文件，完成后，我们在编译列表上就看到.

<br />

下面转载内容:原文链接：https://www.jianshu.com/p/edf9a3abf090

---

修改 CSS 文件默认生成目录

Tips：
其实修改路径的方法就在插件文档里，Get More Information

但是细心的同学会发现，默认编译生成的 .css 文件（比如：demo.css）是在当前 .scss 文件（比如：demo.scss）同一目录下的，并且自带会生成 .map 文件（比如：demo.css.map，该文件主要用于调试，Get More Information）。
默认生成的目录结构示意如下：

demo/
└── src/
    └── scss/
        ├── demo.css
        ├── demo.css.map
        └── demo.scss

啥，你说不介意这个目录结构？骚年，还能不能有点追求，还想不想找女朋友？
非处女座表示，这样的目录我也不喜欢，.scss 和 .css 文件都混在一起太扯了。还有 .map 文件我也不想要。
我就想要这样简单整洁的：

demo/
└── src/
    ├── css/
    |   └── demo.css
    └── scss/
        └── demo.scss

客官，别急，这就给您上菜~
Sublime Text > Preferences > Browse Packages 打开 Packages 目录，我的路径如下：
C:Users***AppDataRoamingSublime Text 3Packages
来到 Sublime Text 3 下载插件包的文件夹，即：
C:Users***AppDataRoamingSublime Text 3Installed Packages
你会看到你所下载的许多插件，找到 SASS Build.sublime-package 文件（这个就是 SASS Build 插件包），使用 WinRAR 打开：

 

Build.png

其实这两个配置文件内容差不多，来，用 Sublime Text 打开：

• SASS - Compressed.sublime-build 文件内容：

{

    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "compressed"],

    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

• SASS.sublime-build 文件内容

{

    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

都可以看到配置文件中有这么一句：

"$file:${file_path}/${file_base_name}.css"

对头，这个就是生成目录路径的关键所在，${file_path} 就是当前 css 文件的路径，${file_base_name} 就是该 css 文件的文件名称。
我们将它改成如下：

"$file:${file_path}/../css/${file_base_name}.css"

我相信这点改变你还是看的懂的，这样就可以生成我们所想要的目录了。

Tips:
你可能多次尝试后发现，改变配置文件会说文件正在被使用之类的错误，哈哈哈 O(∩_∩)O
其实呢，顺序很关键，先 Sublime Text 打开这个文件，修改保存后关闭 Sublime Text，注意别关闭该文件。此时 WinRAR 会提示文件已修改，是否更新，点击 是（Y） 就好了

<br />

---

【加盐】修改生成的 CSS 代码样式

以上所有部分，基本都能通过百度搜索的到，相信你也看累了，来点你没见过的~

使用 Beyond Compare 软件对比 SASS.sublime-build 、SASS - Compressed.sublime-build 两个配置文件，可以看出两个配置文件差别很小，其实就是 SASS - Compressed.sublime-build 多了 "--style", "compressed" 这两项而已：

 

compare.png

这两个选项的意思就是：使用压缩（compressed）的样式（style）输出 css 文件
等效于：

"--style=compressed"

你想知道我咋知道的？那就打开 CMD 吧，输入 sass -h 或者 sass --help：

 

sassHelp.png

看以看到，除了 compressed 外，还有 expanded ，我们来改变插件文件来对比一下 这三种配置的输出区别：

 

style.jpg

是不是一目了然。所以，当你不使用 compressed 样式的时候，建议使用 expanded ，因为这种样式缩进比较美观。——个人观点，不服来打我啊 (●ˇ∀ˇ●)*

<br />

---

【加盐】使用 Watch 实时编译

除此之外，还可以发现这一项：

"--update"

这货到底是干啥的，仍旧打开 CMD 查看 sass --help：

 

watch.png

嗯哼，大致意思就是简单的编译并更新生成的 css 文件了。
我们可以看到上面还有个 --watch 命令，告诉你，这货很好玩哦~
我们把 --update 改成 --watch 试试，保存 .scss 文件的时候你会发现 Sublime Text 底部 log （你要是不喜欢看见这个 log，ESC 键就好，不过这个不能中断 watch）：

 

sublimeWatchFile.png

这就表明正在监听这个文件，一旦这个文件发生改变（需要保存），就会自动编译这个文件。

你可能会觉得没什么，反正都要保存，不都是会触发编译吗？
咳咳，骚年，一看你就是太年轻，代码写的不够多啊。——请容许我装会儿逼，嗯，就静静地 (｡･∀･)ﾉﾞ

在做大一点的项目的时候，为了模块化开发，同时也为了方便代码管理，通常会将一个组件 .scss （比如：dialog.scss）拆分成多个子文件（比如：_header.scss、_body.scss、_footer.scss），如下示意结构：

demo/
└── src/
    ├── css/
    |   └── dialog.css
    └── scss/
        ├── part/
        |   ├── _header.scss
        |   ├── _body.scss
        |   └── _footer.scss
        |
        └── dialog.scss

然后在 dialog.scss 通过 Sass 的 import 方式引进来:

@import 'part/header';
@import 'part/body';
@import 'part/footer';

// To Do

使用 --update：

每个文件修改，都需要重新编译 dialog.scss 才能看到最新样式。

使用 --watch：

只需要对 dialog.scss 文件 Ctrl + S 保存编译一次，就可以监听这个文件以及它所引用的所有子文件的改变。
每当 _header.scss、_body.scss、_footer.scss 或 dialog.scss 被修改保存，就会自动触发一次 build。瞬间解放劳动力~

当然，你也可以使用脚手架啥的，也就不需要这 watch 了，当然也就不需要Sublime Text 编译了。当然咯，你会看到这里就说明你没使用脚手架~——机智如我 wow~ ⊙o⊙

<br />

---

【加盐】不生成 Source Map 文件（.map）

很简单，在配置文件里加上这一项：

"--sourcemap=none"

<br />

---

【加盐】不编译以下划线开头的文件（_header.scss）

这个坑是我上周才填完的，嗯~ o(*￣▽￣*)o

*** 问题：
当将 .scss 文件（比如：dialog.scss）拆分成多个子文件（比如：_header.scss、_body.scss、_footer.scss*）引入。
每次新建一个子文件， Sublime Text 都会自动编译一次子文件。此外，每次手贱习惯性 Ctrl + S 保存，也自动编译了....好累 (ˉ▽ˉ；)...

这个解决方法就是修改 SublimeOnSaveBuild 配置项，不过这个不需要修改源文件。
先看看默认配置，Sublime Text > Preferences > Packages Settings > SublimeOnSaveBuild > Packages - Defaults 打开：

{
    "filename_filter": "\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

可以看到键名： filename_filter，简单翻译为 “文件名称过滤器” 。——嗯，我就是只过了四级，还是裸考哦~ o(*￣▽￣*)o
对应的键值为：\.(css|js|sass|less|scss)$，就是一段正则了，表示以 .css 或者（js、sass、less、scss）结尾的文件。（嗯，这两个 有个是转义的，我正则不大好，有错请指出）

复制如上配置，粘贴至 Sublime Text > Preferences > Packages Settings > SublimeOnSaveBuild > Packages - User，并修改为：

{
    "filename_filter": "(/|\\|^)(?!_)(\w+)\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

至于为啥是 (/|\\|^)(?!_)(\w+)\.(css|js|sass|less|scss)$？阿西吧，我也没看懂 ╮(╯▽╰)╭，此正则来源 joshuawinn。
看明白的的吱一声哈，谢谢~

小插曲：
我最开始写了段简单的 JS 正则测试了一下：

let reg = /^[^\_]w*.(sass|less|scss)$/,
    arr = [
        'a.scss',
        '_a.scss',
        'a_.scss'
    ];

> arr.forEach(function( filename ) {
    console.log( filename + '	' + reg.test(filename) );
});

> // a.scss true
// _a.scss  false
// a_.scss  true

代码在浏览器下是可以的，但是放到配置项里就不行了，首先 w+ 就需要转义，不然报错：
Error trying to parse settings: Invalid escape in PackageUserSublimeOnSaveBuild.sublime-settings:2:24
好吧，我转义成：^([^_])\w*.(sass|less|scss)$，仍旧无效 ╮(╯-╰)╭

<br />

---

总结

To you：
贴上个人的配置:

SASS - Compressed.sublime-build：

{

>   "cmd": ["sass", "--watch", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style=compressed", "--sourcemap=none"],

>   "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

>   "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

>   "windows":
    {
        "shell": "true"
    }

>}

SASS.sublime-build：

{

>   "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style=expanded", "--sourcemap=none"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

>   "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

>   "windows":
    {
        "shell": "true"
    }

>}

***SublimeOnSaveBuild ***：

{
    "filename_filter": "(/|\\|^)(?!_)(\w+)\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

嗯，这就是我在使用 Sublime Text 3 开发 Sass 时所遇见和踩到的坑了，有啥不懂的欢迎留言~

<br />