この記事をシェアする

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

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

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

_s options

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

ダウンロードされるファイル

_s-files1

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

_s-sass-files

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

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

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

  • 背景、テキスト、リンク、ボタンのカラー:sass/variables-site/_colors.scss
  • メインの幅とサイドバーの幅 : sass/variables-site/_structure.scss
  • フォントとline-height : sass/variables-site/_typography.scss

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

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

Sass のコンパイル

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

Less はどうなの?

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

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

この記事をシェアする