Sublime Text 配置 Sass

2016-12-25 本文已影响1231人於風聽語

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。

本文基于 Windows 下的 Sublime Text 3 来讲述，和 Mac OS 会有些许不同。

安装 Ruby

先去官网下载最新的 RubyInstaller，下载后直接安装。安装过程中需要注意一点，记得勾选上 Add Ruby executables to your PATH 这项，即添加 Ruby 到环境变量，如下图所示：

RubyInstaller.png

安装 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 .

安装 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 环境变量没配置好（跟着我的步骤是不会出现这个问题）
文件目录包含中文名称（虽然咱英语差，这不是还有翻译助手吗）
代码编码不正确（常见于注释）

修改 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 打开：

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） 就好了

【加盐】修改生成的 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 ，因为这种样式缩进比较美观。——个人观点，不服来打我啊 (●ˇ∀ˇ●)*

【加盐】使用 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⊙

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

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

"--sourcemap=none"

【加盐】不编译以下划线开头的文件（_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
}

小插曲：
我最开始写了段简单的 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)$，仍旧无效 ╮(╯-╰)╭

总结

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 时所遇见和踩到的坑了，有啥不懂的欢迎留言~

尾记

虽然说 WebStrom 也挺好的，功能强大，但是我就不喜欢它。启动慢，大概是胖子就跑不快的缘故吧...╮(╯-╰)╭
最近在看 Bootstrap 4.0 的 css 源码，用的就是 Sass。代码组织结构很值得借鉴，有兴趣的小伙伴们可以去看看。

这是我第一次在简书写博客，也是第一篇，Markdown 用的也不是很熟练，将就着看吧。嗯，加油~ o(*￣▽￣*)o

Merry Christmas ~ ~ o(*￣▽￣*)ブ
—— 2016/12/25 By Live

MerryChristmas.PNG