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

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

Sassとはなんぞ？

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

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

CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） – ＠IT
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく…
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';

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

$border: 1px solid #ccc;
$color-main: rgb(37, 111, 153);
$container-width: 800px;
$font-color: #333;
$font-color-a: rgb(47, 135, 167);
$font-color-a-hover: lighten($font-color-a, 15%);

@mixin breakpoint($width: 800px){
  @media screen and (min-width: $width){
    @content;
  }
}

@mixin resetlist(){
  list-style: none;
  margin: 0;
  padding: 0;
}

@mixin pad($size: 1){
  padding: 4% * $size 0;
}

%meta{
  font-size: 0.8em;
  color: #666;
  margin-top: 1em;
}

---
---

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


a{
  color: $font-color-a;
  &:hover{
    color: $font-color-a-hover;
  }
}

body{
  color: $font-color;
}

h2{
  margin: 2em 0 1.5em 0;
  font-size: 20px;

  @include breakpoint(){
    font-size: 24px;
  }
}

p{
  margin: 0 0 1em 0;
}

.container{
  max-width: $container-width;
  margin: auto;
  padding: 0 25px;
}

.copyright{
  margin-bottom: 0;
}

.footer{
  border-top: $border;
  @include pad();

  &__container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.front-page{
  @include pad();
}

.nav{

  border-top: $border;
  border-bottom: $border;

  &__list{
    @include resetlist();
    display: flex;
    flex-wrap: wrap;
  }

  &__item{
    margin-right: 1em;

    a{
      display: block;
      text-decoration: none;
      color: $font-color;
      padding: 15px 10px;
      font-size: 0.9em;
    }
  }
}

.page{

  &__header{
    border-bottom: $border;
    @include pad();
  }

  &__title{
    margin: 0;
    font-size: 28px;

    @include breakpoint(){
      font-size: 40px;
    }
  }

  &__description{
    @extend %meta;
  }

  &__body{
    @include pad();
  }

  &__date{
    @extend %meta;
  }
}

.site-title{
  font-weight: bold;
  padding: 4% 0;

  @include breakpoint(){
    font-size: 20px;
  }

  a{
    color: $font-color;
    text-decoration: none;
  }
}

.pager{
  @include pad();
  display: flex;
  flex-wrap: wrap;
  
  &__item{

    $pre: &;

    a{
      text-decoration: none;
    }

    &--prev{
      @extend #{$pre};
      margin-left: auto;
    }

    &--next{
      @extend #{$pre};
    }
  }
}

.social-link{
  display: flex;
  flex-wrap: wrap;

  &__item{
    font-size: 1.5em;

    a{
      color: #666;
      display: block;
      padding: 5px;
    }
  }
}

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