Jekyll 中 Sass 的使用

• Jekyll 中 Sass 的使用

• 什么是 Sass
• 关于 Sass 的优势

• Usage
  • Install Sass
  • 目录结构
  • 使用
  • include stylesheet to html
  • 项目实例
• 参考文献

Jekyll 中 Sass 的使用

什么是 Sass

Sass 是一群超级懒的人创造的 Css 快速编程工具

Sass（Syntactically Awesome Style Sheets）是一个相对新的编程语言，Sass 为 web 前端开发而生，可以用它来定义一套新的语法规则和函数，以加强和提升 CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了 CSS 的能力，增加了变量，局部和函数这些特性。

关于 Sass 的优势

1. Sass 的嵌套可以将多层级的 Css badcode 显得跟简练
2. Sass 的变量可以统一控制设计风格
3. Sass 的@import等导入方法可以实现设计模块化分离
4. Sass 比 Css 好玩

Usage

Install Sass

Jekyll 3 已经自带 Sass 编译器了, 不需要额外安装

目录结构

.
| - _sass
  | - _typography.scss
  | - _layout.scss
  | - _colors.scss
| - css
  | - screen.scss
  | - print.scss

• _sass 文件夹里面是 partial 文件,这些个文件在最后构建的时候不会被生成。
• css 文件夹里面是 main 文件, 这里面的文件最终会生成到 _site/css
  • 这个文件夹的名称可以自由更改, 反正最终只要保证你的 html 访问到对文件夹即可。
  • 这部分文件写的时候上方要加 YAML header: 最顶上的两行横杠不能删除, 这个是为了让文件按照 Jekyll 标准进行读取

使用

_sass/test.scss

.content {
  height: 50px;
}

css/test.scss

---
---

@import "test";

.content {
  width: 45rem;
  margin: 0 auto;
};

include stylesheet to html

html 照常使用 css

<li*nk rel="stylesheet" href="/css/test.css">

最后文件会被自动转换成 .css 因此只需要引用 .css 即可

项目实例

直接看官方项目吧: https://github.com/jekyll/jekyll-sass-converter

参考文献

• Using Sass with Jekyll
• Jekyll Docs
• How to use Sass with Jekyll (Bootstrap and Font Awesome example)
• i-am-a-jekyll-god