JekyllでのSassの使用

文章は最初にszhshpの第3国境研究所に発表して転載して明記してください

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コンパイラを持っています.追加のインストールは必要ありません.

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を作成します.中には1行しか入っていません.

---
---

// Imports
@import "style";

プロジェクトのパス:

jekyll-project/
├── _includes/
├── _layouts/
├── _posts/
└── _sass/
│   └── styles.scss
└── css/
│   └── styles.scss
├── _config.yml
└── index.html

注意:一番上の2行の横棒は削除できません.これはJekyll規格に従ってファイルを読み込むためです.

include stylesheet to html

html通常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