更新日: 2023 / 12 / 19

JekyllでSass(SCSS)を使う方法

カテゴリー: コーディング

JekyllはHTMLコーディングを効率よくできるようになる静的サイトジェネレーターの１つ。

ヘッダーやフッターのようなページ間で共通のパーツを1つのコードで再利用できるようになる便利なツールです。

ここではJekyllをさらに便利に使えるSass(SCSS)の導入方法と使い方について解説します。

  1. JekyllでSASSを使う前に

    1. Bootstrap5もSCSSで使える

  2. JekyllでSASS(SCSS)を使う方法

    1. _sassフォルダをプロジェクトに追加する
    2. _sassフォルダにscssファイルを入れる
    3. 読み込み用のscssファイルを作成してインポートする
    4. テンプレートにscssファイルを読み込む
    5. Jekyllの設定でscssファイルの圧縮方法を変更する
    6. JekyllでHTMLを生成する

  3. まとめ

JekyllでSASSを使う前に

JekyllでSASSを使う前にまずJekyllをインストールしておく必要があります。

WindowsとMacでインストール方法が異なりますが、一度インストールすればあとは自由に使えるようになるのでまずは下記の記事やJekyllの公式ドキュメントを参考にインストールを行なってください。

Jekyllのインストールが完了すればその時点でSASSも使えるようになっています。

Bootstrap5もSCSSで使える

Bootstrap5もデフォルトのCSSを読み込むだけでなく、SCSSを使ってテーマをカスタマイズしたり、classを拡張することができます。

「LP-UIKIT」ではJekyllとBootstrap5で高品質なLPテンプレートを効率よく作成することができます。

JekyllでSASS(SCSS)を使う方法

JekyllがインストールできたらすでにSASSは使えるようになっているので、あとは以下の手順でSCSSファイルを作成し、テンプレートに読み込むだけです。

Jekyllの設定でSCSSファイルの圧縮方法(compressや)

  • _sassフォルダをプロジェクトに追加する
  • _sassフォルダにscssファイルを入れる
  • 読み込み用のscssファイルを作成してインポートする
  • テンプレートにscssファイルを読み込む
  • Jekyllの設定でscssファイルの圧縮方法を変更する
  • JekyllでHTMLを生成する

_sassフォルダをプロジェクトに追加する

JekyllでSASSを使うにはプロジェクトフォルダに_sassというフォルダを作成してその中にSCSSファイルを入れる必要があります。

例えばJekyllのデフォルトプロジェクトなら次のようなフォルダ構成になると思います。

_posts
_sass // _sassフォルダを追加
404.html
_config.yml
about.markdown
Gemfile
Gemfile.lock
index.markdown

_sassフォルダにscssファイルを入れる

_sassフォルダの中に入ってさえいればその中のフォルダ構造はなんでも大丈夫です。例えば次のような構造にできます。

_sass/
  - common/
    - global.scss
  - block/
    - buttons.scss
  - theme/
    - light.scss

ここではシンプルに_sassフォルダの直下にmain.scssというファイルを作成します。

_sass/
  - main.scss

読み込み用のscssファイルを作成してインポートする

Webページを作るときは通常、index.htmlやcompany.htmlのようにページごとにHTMLファイルを用意し、CSSや画像などはassetsのようなフォルダにまとめておくことが多いです。

assets/
  - css/
  - images/
index.html
company.html

この場合、各ページのHTMLファイルからassetsフォルダ内のCSSファイルや画像ファイルを読み込む必要があります。

JekyllでSASSを使う場合はこのassetsフォルダ(_sassの場合と違って名前はなんでもいいです)にページで読み込むSCSSファイルを作成します。

assets/
  - css/
    - style.scss
  - images/
index.html
company.html

CSSなのにSCSSファイルを置いているのは、Jekyllで生成する際にSCSSファイルが自動的にコンパイルされてCSSファイルに変換されるためです。

style.scssの中身はこちらのようになります。

---
---

@import "main";

先ほど作成した_sass/main.scssをstyle.scssにインポートしています。

基本的にSCSSの中身は_sassの方で書いて、assetsフォルダの方は読み込むだけにしておきます。

テンプレートにscssファイルを読み込む

SCSSファイルを用意できたら、次はHTMLからSCSSファイルを読み込めるようにします。

先ほど作った構造の場合は次のようになります。読み込むのは.scssではなく、コンパイル済みの.cssになります。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>

    <!-- style.cssの読み込み -->
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {{ content }}
  </body>
</html>

Jekyllの設定でscssファイルの圧縮方法を変更する

ついでにSCSSファイルの圧縮方法の設定も行なっておきます。

Jekyllのデフォルト設定だとSASSのコンパイル時に圧縮されない状態になっています。CSSを圧縮して容量を減らすには次のようにします。

_config.ymlにある# Build settingsの下にsassの設定を追加します。

# Build settings
theme: minima
sass:
  style: compressed

styleの設定でcompressedを入れることでCSSコードを圧縮した状態で出力することができます。

JekyllでHTMLを生成する

ここまででSASSの設定は完了です。あとは_sassフォルダに入れたSCSSファイルを編集してページをデザインしていくことができます。

最後にページを生成してCSSファイルに変換しておきます。

ターミナルで次のコマンドを入力すると自動的に_siteフォルダが作成され、その中に生成されたHTMLファイルとCSSファイルが入っています。

bundle exec jekyll serve

先ほどの構造の場合はこちらのようになります。

assets/
  - css/
    - style.css
  - images/
index.html
company.html

まとめ

Jekyllを使うことでHTMLを効率よくコーディングできるだけでなくSASSも使用することができます。

Bootstrap5を入れてテーマをカスタマイズしたり、Classを拡張してもっと細かくフォントサイズやマージンの設定をできるようにしたりといったことも可能です。