WordPressスターターテーマ _s の Sassオプション

この記事をシェアする

2014年の始めごろから議論されていたWordPressのスターターテーマ「Underscores (_s)」にSassのオプションが提供されたのでご紹介します。
なお、php部分は従来のものと違いはなく、あくまで style.css のみが Sass に対応しただけです。

公式サイトでの Sassオプション

まずは公式サイトにアクセス

公式サイトで「Advanced Options」をクリック。
項目を埋めつつ、「_sassify!」チェックボックスをチェックして「GENERATE」をクリックするとsassファイルを含んだテーマ一式をダウンロード出来ます。

ダウンロードされる .zip を解凍するとこのような上の写真のようなファイル構造になっています。
「sass」ディレクトリが追加されてその中にさらにフォルダと sass ファイル（.scss）が追加されています。

sass ディレクトリの中身は上記のファイル構成になっています。
全ての sass ファイル（.scss）は style.scss に読み込まれています。

デフォルトの mixin は sass/mixins/_mixins-master.scss にまとめられています。
特に内容を変更する必要はないと思いますが、自作の mixin を追加したい場合はこのファイルにまとめるといいでしょう。

変数類は sass/variables-site/ にまとめられています。

これらのファイルを変更すれば共通で使用している部分は一度で変更されます。

その他の装飾については style.scss から読み取ってください。

Sass のコンパイルはアプリケーションまたはコマンドラインで行う必要があります。
これについては _s ではサポートしていませんので、各自で用意してください。

Less については執筆時点（2014年9月1日）でGitHubでまだ議論中です。
ただ実装には前向きでパッチを求めています。
興味のある方はプルリクエストを送ってみてはどうでしょうか？

https://github.com/Automattic/_s/issues/562

この記事をシェアする