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