Macでwordpressのテーマ編集作業しています(☝ ՞ਊ ՞)
Sassをインストール
Sassをインストールします。
sudo gem install sass
これでok
バージョンを確認。
sass -v
Sass 3.2.12 (Media Mark)
Sass 3.2.12 (Media Mark)
wordpressのテーマディレクトリへ移動
いまhogeという名前のテーマを扱っているとしてテーマのディレクトリに移動します。
cd
/Users/kawasakiosamu/wordpress/wp-content/themes/hoge/
/Users/kawasakiosamu/wordpress/wp-content/themes/hoge/
ディレクトリを確認
pwd
/Users/kawasakiosamu/wordpress/wp-content/themes/hoge/
/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を色々書く
*/
/*
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が更新されます。
かなりべんりですねー(☝ ՞ਊ ՞)