このページを改善する

アセット

JekyllはSassをビルトインでサポートしており、Ruby gem経由でCoffeeScriptを使用できます。これらを使用するには、まず適切な拡張子名（.sass、.scss、または.coffeeのいずれか）のファイルを作成し、**3つのダッシュの行を2行**記述する必要があります。

---
---

// start content
.my-definition
  font-size: 1.2em

Jekyllはこれらのファイルを通常のページと同じように扱い、出力ファイルは元のファイルと同じディレクトリに配置されます。たとえば、サイトのソースフォルダにcss/styles.scssというファイルがある場合、Jekyllはそれを処理して、サイトの出力フォルダのcss/styles.cssに配置します。

Jekyllはアセットファイル内のすべてのLiquidフィルタとタグを処理します。

MustacheまたはLiquidテンプレート構文と競合する他のJavaScriptテンプレート言語を使用している場合は、コードの周囲に{% raw %}と{% endraw %}タグを配置する必要があります。

Sass/SCSS

Jekyllでは、Sass変換をいくつかの方法でカスタマイズできます。

すべてのパーシャルをsass_dir（デフォルトは<source>/_sass）に配置します。メインのSCSSまたはSassファイルを、出力ファイル内の希望する場所に配置します（例：<source>/css）。例として、JekyllでSassサポートを使用するこのサンプルサイトをご覧ください。

Sassの@importステートメントを使用している場合は、sass_dirがSassファイルを含むベースディレクトリに設定されていることを確認する必要があります。

sass:
    sass_dir: _sass

Sassコンバーターは、sass_dir設定オプションを_sassにデフォルト設定します。

sass_dirはSassでのみ使用されます。

sass_dirはSassインポートのロードパスになるだけで、それ以上の機能はありません。つまり、Jekyllはこれらのファイルを直接認識しません。ここのファイルには、上記で説明した空のフロントマターを含めないでください。含まれている場合、上記のように変換されません。このフォルダにはインポートのみを含める必要があります。

_config.ymlファイルでstyleオプションを使用して、出力スタイルを指定することもできます。

sass:
    style: compressed

これらはSassに渡されるため、Sassがサポートする出力スタイルオプションはすべてここで有効です。

Sass設定オプションの詳細については、Sass設定ドキュメントを参照してください。

Coffeescript

Jekyll 3.0以降でCoffeescriptを有効にするには、次の手順を実行する必要があります。

  • jekyll-coffeescript gemをインストールします。
  • _config.ymlが最新のもので、以下が含まれていることを確認します。
plugins:
  - jekyll-coffeescript