Improve this page

Assets

JekyllはSassの組み込みをサポートし、Ruby gemでCoffeeScriptを使用することができます。これらを使用するには、適切な拡張子（.sassか.scssか.coffee）のファイルを作成し、下記のように2行の3つのダッシュで始める必要があります。

---
---

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

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

JekyllはAssetファイルの全てのLiquidタグとフィルタを処理します。

Liquidテンプレート文法と競合するMustache や他の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はこのディレクトリのファイルは知らないということを意味します。ここのファイルには空のfront matterを含めるべきではありません。含んでいたとしても、変換されることはありません。このフォルダは、インポート用のファイルのみです。

_config.ymlファイルのstyleで出力スタイルを指定することもできます。

sass:
    style: compressed

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

Coffeescript

CoffeeScriptはJekyll 3.0以上で有効です。

  • jekyll-coffeescript gemをインストールします
  • _config.ymlに下記を確実に書き込んでください。
plugins:
  - jekyll-coffeescript