タグ: 未設定

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

投稿日 : 2013年6月24日 | 更新日 : 2014年02月02日 前のページへ戻る

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

CSS,Programming,WordPress | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

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

 

 

 


このページの上へ