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

2017-02-23 /

Jekyll

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

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

Sassとはなんぞ？

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

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

爆捗！ WordPressテーマ作成ショートカット（3）：CSSコーディングで泣かないためのSassの基礎知識と10の利点 (1/3) - ＠IT

www.atmarkit.co.jp

Jekyllで普通のCSSを使う

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

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

HTML側からの読み込みは

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

とします。これは、前回までですでに「_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」に記述済みです。）

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

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タグ内に記述済みです。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

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

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

---
---

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

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

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

まとめ

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

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

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