使用 Jekyll 内置的 Sass 预处理器

之前有介绍过 CSS 的预处理器 Sass,今天翻阅 Jekyll 官网发现,Jekyll 本身就内置 Sass 的编译,一些小修改,就剔除了 compass 工具,完美的使用,顺便记录下,希望本文能帮到大家。

如果你也想尝试的话,要确定以下几点

一般大家都喜欢将 Jekyll push 到 GitHub Pages 上,那么首先对比下 GitHub Pages 上对版本的要求吧:https://pages.github.com/versions/

一切准备就绪,下面开始安装 Sass:

$ gem install sass

在你的 css 目录下创建 style.scss

---
---
// your scss here

那么,在 $ jekyll build 编译后,会自动将 css/style.scss 转化成 _site/css/style.css

最后只需在你的模版文件的 <head> 区域加入以下代码:

<link rel="stylesheet" href="/css/style.css">

某些同学,喜欢将 Scss 分割开,最后在 style.scss 中使用 @import 来引入,当然可以,你可以在 _sass 目录下写入你的 Scss,譬如:

_sass/_one.scss
_sass/_two.scss

在你的 _config.yml 中的适当地方添加如下:

sass:
    sass_dir: _sass

最后在 css/style.scss 中引入:

---
---

//Imports
@import "one";
@import "two";

注意,两行的 --- 是必须的,以便让 Jekyll 知晓该前置数据块的文件需要处理。可以详细了解下 Jekyll 的 YAML 前置数据

_sass 是 Jekyll 默认的目录,你可以设置到其他地方,只需 _config.yml 中声明好即可:

sass:
    sass_dir: path/_lib

顺便提一下,内置的 Sass 编译器支持压缩:

sass:
    sass_dir: path/_lib
    style: :compressed

参考:http://jekyllrb.com/docs/assets/