WordPressのテーマ作成でStyleDoccoとCompassを使う : WordPress

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

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数