文章最初發(fā)表于szhshp的第三邊境研究所
轉(zhuǎn)載請(qǐng)注明
Jekyll中Sass的使用
什么是Sass
Sass是一群超級(jí)懶的人創(chuàng)造的Css快速編程工具
Sass（Syntactically Awesome Style Sheets）是一個(gè)相對(duì)新的編程語(yǔ)言，Sass為web前端開(kāi)發(fā)而生称龙，可以用它來(lái)定義一套新的語(yǔ)法規(guī)則和函數(shù)留拾，以加強(qiáng)和提升CSS。通過(guò)這種新的編程語(yǔ)言鲫尊，你可以使用最高效的方式痴柔，以少量的代碼創(chuàng)建復(fù)雜的設(shè)計(jì)。它改進(jìn)并增強(qiáng)了CSS的能力疫向，增加了變量竞帽，局部和函數(shù)這些特性。
關(guān)于Sass的優(yōu)勢(shì)
- Sass的嵌套可以將多層級(jí)的Css badcode 顯得跟簡(jiǎn)練
- Sass的變量可以統(tǒng)一控制設(shè)計(jì)風(fēng)格
- Sass的
@import等導(dǎo)入方法可以實(shí)現(xiàn)設(shè)計(jì)模塊化分離 Sass比Css好玩
Usage
Install Sass
Jekyll 3 已經(jīng)自帶Sass編譯器了, 不需要額外安裝
Config
在項(xiàng)目里新建一個(gè)文件夾_sass, 當(dāng)然也可以用其他名字, 之后可以進(jìn)行設(shè)置, 然后將實(shí)際.scss放到里面
jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
└── _sass/
│ └── styles.scss
├── _config.yml
└── index.html
修改_config.yml以開(kāi)啟sass:
sass:
sass_dir: _sass
style: compressed
這里可以設(shè)置sass的默認(rèn)路徑
Create a Sass stylesheet
在自己的CSS文件夾下創(chuàng)建一個(gè).scss, 里面只放一行:
---
---
// Imports
@import "style";
項(xiàng)目路徑:
jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
└── _sass/
│ └── styles.scss
└── css/
│ └── styles.scss
├── _config.yml
└── index.html
注意:最頂上的兩行橫杠不能刪除, 這個(gè)是為了讓文件按照J(rèn)ekyll標(biāo)準(zhǔn)進(jìn)行讀取
include stylesheet to html
html照常使用css
<li*nk rel="stylesheet" href="/css/styles.css">
最后文件會(huì)被自動(dòng)轉(zhuǎn)換成.css因此只需要引用.css即可
項(xiàng)目實(shí)例
直接看官方項(xiàng)目吧: https://github.com/jekyll/jekyll-sass-converter
