Jekyllのテーマを自作する 基本編 – 第4回 – Sass(CSS)でスタイルを作成する

今回はJekyllでのスタイルシートの作成についてです。といっても、主にSass(Scss)のお話となります。JekyllではデフォルトでSassのコンパイルをしてくれるのでとても便利です。

Jekyllのテーマを自作する 基本編 記事一覧

Sassとはなんぞ?

まず、Sassという言葉にあまり馴染みのない方へ。Sassは、簡単に言うと、変数や関数の使えるCSSみたいなものだと思ってください。これによって、CSSの作成の効率化や、維持管理のしやすさが格段に向上します。詳しくはおググりください。

こちらの記事にSassについて分かりやすく書いてあるので、紹介します。

Jekyllで普通のCSSを使う

Sassの前に、普通のCSSを使う場合は、基本は普段のWeb制作と同じです。例えば、

「assets/css/style.css」を作成してビルドすると、「_site/assets/css/style.css」が生成されます。

HTML側からの読み込みは


とします。これは、前回までですでに「_layouts/default.html」に記述済みです。

JekyllでSass(Scss)を使う

今回は、主にJekyllでSass(Scss)を使う時のお作法についての説明となります。

まず、メインとなるSassファイルを作成します。ちなみに、第1回でCSS用のフォルダ「assets/css」を作ってあるので、そこに作成します。

$ touch assets/css/style.scss

ちなみに、デフォルトで「_sass」フォルダが用意されているんですが、これは孔明の罠です。僕はこの中にメインのSassファイルを作成して、コンパイルできずにハマってました。このフォルダについては後述します。

JekyllでScssを使う時の注意

「.scss」ファイルをコンパイルするには、もうひとつ罠があります。それは、Front-matterを記述しないとコンパイルできない点です。scssファイルがそのまま「_site」フォルダに吐き出されて、またもやハマりました。

解決法としては、要はトリプルダッシュを最上部に2行記述すればOK。

テストのコンパイルをしてみます。

---
---

body{
  background: pink;
}

「_site/assets/css/style.css」が生成されていればOK。「_layouts/default.html」でCSS読み込みの記述をすれば準備完了です。(前回までで「_layouts/default.html」に記述済みです。)


JekyllでSassファイルをインポートする

お次はSassファイルのインポート。これがちょっとJekyll仕様になっていますので説明します。

ここでようやく「_sass」フォルダの登場です。このフォルダは、メインのSassファイルではなく、インポート用のSassファイルを入れておく場所となっています。また、例えば「_sass/mixins.scss」をインポートするには、以下のように「_sass」フォルダへのパスの記述が不要です。

---
---

@import 'mixins';

また、もう一つの特長として、通常インポート用Sassファイルは、ファイル名の頭に「_」(アンダースコア)が必要ですが、「_sass」フォルダに入れてあるファイルについては、アンダースコアなしでもコンパイルされません。

JelyllでSassが動かない!のまとめ

  • メインファイルは「_sass」以外の場所に置いてありますか?
  • Scss(.scss)を使う時、Front-matter(ファイル最上部にトリプルダッシュを2行)入れていますか?

以上2点を確認すれば、多分動きます。

Sassを圧縮してコンパイルする

「_config.yml」に以下を記述します。(前回までで作成した設定ファイルには、「style: expanded」を指定してあります。)

sass:
  style: compressed

Sassを使ってスタイルを作成する

その前に、本記事では、Normalize.cssという、デフォルトのスタイルをよしなにしてくれるCSSをcdnjs.com から読み込みます。メインCSSの前に読み込ませます。(Sassでインポートしてもいいんですが。)

これも、あらかじめ「_layouts/default.html」のheadタグ内に記述済みです。



まず、インポート用のSassファイルを作成します。

$ touch _sass/mixins.scss _sass/config.scss _sass/extends.scss

メインファイルからインポートします。

---
---

@import 'config';
@import 'mixins';
@import 'extends';

これで準備完了。後はスタイルを作成するのみ。

こんな感じになりました。

まとめ

以上、Jekyllでスタイルシートを作成するの巻でした。