Jekyll SCSSの使い方

投稿日: by keruu

JekyllでSCSSを使う方法です。

前回：Jekyll レイアウトの使い方

Step1. CSSを使う

SCSSの前にCSSを使ってみます。

main.cssを次のような感じで用意します。

@charset "utf-8";
body {
 background-color: #ccc;
}

index.htmlからは普通にCSSを呼び出すだけです。

<link rel="stylesheet" href="main.css">

Step2. SCSSを使う

main.cssをmain.scssにリネームします。JekyllにSCSSを認識させるには、.scssの先頭に2つの---を置きます。

---
---
@charset "utf-8";
body {
 background-color: #ccc;
}

Jekyllが.scssを.cssに変換するので、index.htmlの変更は不要です。

Step3. 共通部分のSCSSを分ける

複数のSCSSで共通部分があれば、_sassフォルダに分離できます。

_sass/_common.scssを作り、次のようにします。

body {
 background-color: #ccc;
}

main.scssでは@importを使い、_sass/_common.scssを読み込みます。

---
---
@charset "utf-8"
@import "_common"

以上。

Jekyll