Jekyll中Sass的使用

Posted 2020-09-22 szhshp的第二边境中转站

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jekyll中Sass的使用相关的知识，希望对你有一定的参考价值。

文章最初发表于szhshp的第三边境研究所
转载请注明

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编译器了, 不需要额外安装

Config

在项目里新建一个文件夹_sass, 当然也可以用其他名字, 之后可以进行设置, 然后将实际.scss放到里面
```
jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
└── _sass/
│   └── styles.scss
├── _config.yml
└── index.html
```
修改_config.yml以开启sass:
```
sass:
    sass_dir: _sass
    style: compressed
```
这里可以设置sass的默认路径

Create a Sass stylesheet

在自己的CSS文件夹下创建一个.scss, 里面只放一行:
```
---
---

// Imports
@import "style";
```
项目路径:
```
jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
└── _sass/
│   └── styles.scss
└── css/
│   └── styles.scss
├── _config.yml
└── index.html
```
注意:最顶上的两行横杠不能删除, 这个是为了让文件按照Jekyll标准进行读取

include stylesheet to html

html照常使用css
```
<li*nk rel="stylesheet" href="/css/styles.css">
```
最后文件会被自动转换成.css因此只需要引用.css即可

项目实例

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

参考文献