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 的优势

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

Usage

Install Sass

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

目录结构

代码语言：javascript复制

.
| - _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

代码语言：javascript复制

.content {
  height: 50px;
}

css/test.scss

代码语言：javascript复制

---
---

@import "test";

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

include stylesheet to html

html 照常使用 css

代码语言：javascript复制

<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

sass html 网站建设 css 编程算法

0 人点赞