Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。
本文基于 Windows 下的 Sublime Text 3 来讲述，和 Mac OS 会有些许不同。
<br />
安装 Ruby
先去官网下载最新的 RubyInstaller，下载后直接安装。安装过程中需要注意一点，记得勾选上 Add Ruby executables to your PATH 这项，即添加 Ruby 到环境变量，如下图所示：
<br />
安装 Sass gem
这一步本该很简单的，直接安装就好了：
gem install sass
—— There is always a 'but' in the futrue .
但是由于 GFW 神一样的存在，导致没有 VPN 的小伙伴们需要更改 gem sources 。
使用快捷键 Win + R 打开 CMD 命令行，进行如下操作：
- 输入
gem sources -l可以看到当前 gem 所使用的 sources ：https://rubygems.org/ - 输入
gem sources --remove https://rubygems.org/移除默认的 sources - 输入
gem sources --add http://gems.ruby-china.org/添加为 Ruby China 的 sources
正常情况下，再执行 gem install sass ，就可以下载了。
题外话：
以往都是使用淘宝的镜像的，但是最近没人维护，所以会提示：
Error fetching https://ruby.taobao.org/: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://ruby.taobao.org/specs.4.8.gz)
HTTPS 的认证失败，还有就是资源不全。Get More Information(http://ruby-china.org/topics/29250)
下载完成后可以使用 sass -v 检测 Sass 版本。至此，环境配置啥的都准备 OK 了。
Let's move on .
<br />
安装 Packages
需要下载三个插件：
- Sass
-
Sass Build 使用
Ctrl + B快捷键编译 -
SublimeOnSaveBuild 用于
Ctrl + S保存文件的时候自动编译
打开 Sublime Text ，Ctrl + Shift + P 调出 Package Control 的输入框 ，输入 Install Package ，再依次搜索下载 Sass 、 Sass Build 、 SublimeOnSaveBuild 三个插件。
此时，新建一个 .scss 的文件，Ctrl + S 就可以保存并且自动编译了。
Tips：
第一次保存编译的时候，会提示 SASS 和 SASS - Compressed 两个选项，这里解释一下两个的区别：
- SASS ： 编译成普通的 css 文件，默认不压缩
- SASS - Compressed ：编译成压缩格式的 css 文件
后期如果想要更改 Build 规则，可以通过 Sublime Text > Tools > Build System 来选择
I sense there is a 'but' in the futrue .
如果不能编译成功，基本上就三个原因：
- Ruby 环境变量没配置好（跟着我的步骤是不会出现这个问题）
- 文件目录包含中文名称（虽然咱英语差，这不是还有翻译助手吗）
- 代码编码不正确（常见于注释）
<br />
修改 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\***\AppData\Roaming\Sublime Text 3\Packages
来到 Sublime Text 3 下载插件包的文件夹，即：
C:\Users\***\AppData\Roaming\Sublime Text 3\Installed Packages
你会看到你所下载的许多插件，找到 SASS Build.sublime-package 文件（这个就是 SASS Build 插件包），使用 WinRAR 打开：
其实这两个配置文件内容差不多，来，用 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" 这两项而已：
这两个选项的意思就是：使用压缩（compressed）的样式（style）输出 css 文件
等效于：
"--style=compressed"
你想知道我咋知道的？那就打开 CMD 吧，输入 sass -h 或者 sass --help：
看以看到，除了 compressed 外，还有 expanded ，我们来改变插件文件来对比一下 这三种配置的输出区别：
是不是一目了然。所以，当你不使用 compressed 样式的时候，建议使用 expanded ，因为这种样式缩进比较美观。——个人观点，不服来打我啊 (●ˇ∀ˇ●)*
<br />
【加盐】使用 Watch 实时编译
除此之外，还可以发现这一项：
"--update"
这货到底是干啥的，仍旧打开 CMD 查看 sass --help：
嗯哼，大致意思就是简单的编译并更新生成的 css 文件了。
我们可以看到上面还有个 --watch 命令，告诉你，这货很好玩哦~
我们把 --update 改成 --watch 试试，保存 .scss 文件的时候你会发现 Sublime Text 底部 log （你要是不喜欢看见这个 log，ESC 键就好，不过这个不能中断 watch）：
这就表明正在监听这个文件，一旦这个文件发生改变（需要保存），就会自动编译这个文件。
你可能会觉得没什么，反正都要保存，不都是会触发编译吗？
咳咳，骚年，一看你就是太年轻，代码写的不够多啊。——请容许我装会儿逼，嗯，就静静地 (｡･∀･)ﾉﾞ
在做大一点的项目的时候，为了模块化开发，同时也为了方便代码管理，通常会将一个组件 .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 + '\t' + reg.test(filename) );
});
> // a.scss true
// _a.scss false
// a_.scss true
代码在浏览器下是可以的，但是放到配置项里就不行了，首先 \w+ 就需要转义，不然报错：
Error trying to parse settings: Invalid escape in Package\User\SublimeOnSaveBuild.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 />
尾记
虽然说 WebStrom 也挺好的，功能强大，但是我就不喜欢它。启动慢，大概是胖子就跑不快的缘故吧...╮(╯-╰)╭
最近在看 Bootstrap 4.0 的 css 源码，用的就是 Sass。代码组织结构很值得借鉴，有兴趣的小伙伴们可以去看看。
这是我第一次在简书写博客，也是第一篇，Markdown 用的也不是很熟练，将就着看吧。嗯，加油~ o(*￣▽￣*)o
Merry Christmas ~ ~ o(*￣▽￣*)ブ
—— 2016/12/25 By Live
