Tweet

Pocket

WordPressのテーマ作成でStyleDoccoとCompassを使うメモ。

StyleDocco

WordPressテーマのstyle.cssからスタイルガイドを作成する。

mytheme
    |
    |-- docs
        |
        |-- css
    |
    |-- style.css

インストール

$ npm install -fg styledocco

パーミションの関係でsudoでインストール。

$ sudo npm install -fg styledocco

スタイルガイド作成

$ cd mytheme
$ styledocco -n "my theme" -o docs/css style.css

StyleDocco

Sass + Compass プリプロセッサ

Sass + Compassを使いstyle.cssを作成する。

1. style.scssを作成する。
2. style.scssをCompassでコンパイルしstyle.cssを作成する。

Sassはインストール済みとする。

Compassをインストール。下記サイトを参考にした。
» CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp

テーマフォルダーに移動。

$ cd テーマのパス

Compassの準備。

$ compass create --bare

テーマディレクトリにconfig.rbが作成される。下記のように修正。

http_path = "/"
css_dir = "/"
sass_dir = "/"
images_dir = "images"
javascripts_dir = "js"

監視・コンパイル

compass watch style.scss

参考
» SassインストールとPhpStormの設定(Mac) : CSS