Macでwordpressのテーマ編集作業しています(☝ ՞ਊ ՞)

Sassをインストール

Sassをインストールします。

sudo gem install sass

これでok

バージョンを確認。

sass -v
Sass 3.2.12 (Media Mark)

wordpressのテーマディレクトリへ移動

いまhogeという名前のテーマを扱っているとしてテーマのディレクトリに移動します。

cd
/Users/kawasakiosamu/wordpress/wp-content/themes/hoge/

ディレクトリを確認

pwd
/Users/kawasakiosamu/wordpress/wp-content/themes/hoge/

sass用ディレクトリとscssファイルを作成

同ディレクトリsassディレクトリを作成します。

mkdir sass

./にstyle.cssがあり、sassディレクトリ内にsass/style.scssを置きます。

style.scssを編集します。

vi sass/style.scss
/*
cssを色々書く
*/

scssからcssファイルを作成

sassコマンドを使ってstyle.scssファイルをstyle.cssに変換します。

sass 変換前のscss:変換後のcss

というように指定します。

この場合は、

sass sass/style.scss:style.css

これでstyle.cssが生成されます。

scssからcssファイルを作成

前回のコマンドを毎回叩くのは面倒なのですが、sassはcssへの変換を自動でやってくれます。
新しくタブを開き、sassディレクトリのscssファイルをテーマディレクトリに変換するコマンドを実行します。

sass --watch sass:./

hoge/sass/style.scssを更新すると自動変換され、hoge/style.cssが更新されます。

かなりべんりですねー(☝ ՞ਊ ՞)