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

  参考文献

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