design makes life richly.

Published: 4年 ago

『StyleDocco』でCSSプリプロセッサのスタイルガイド作成


 
 
先日行ってきたCSS Nite LP26その中でも、ちらっと話題に上がっていたStyledocco。
いったいどんなものかって言うと、スタイルシートの仕様書のようなものです。
モジュール管理や更新時のバックアップ等などに、これがあると非常に便利!!
僕の場合は、SassやLess、Stylus等のプリプロセッサーにも対応しているので、特にmixinのモジュール管理ツールとして導入したいな!と思った訳です。
2週間ぐらいファイル触ってないと、どう定義したか忘れる事も多いので。
では、説明をば。 
 
 

Styledoccoについて

 
StyleDoccoはNode.jsを使って、作成するスタイルガイドジェネレーターです。
CSSにコメントをマークダウン方式で書く事によって、HTMLとして書き出されます。
つまりどういう事かというとこのような感じ☟ 

/*
# ドッコの説明

ここにコメントとか説明入れたりすると便利!

`.inner_text`で文字を白くする

```
<div class="box">
  <p>ボックス1</p>
</div>
<div class="box2 inner_text">
  <p>ボックス2</p>
</div>
```
*/

p {
  font-weight: bold;
  font-size: 13px;
}
.box, .box2 {
  padding: 20px;
  width: 100%;
}
.box { background: #ccc;}
.box2 { background: #333;}
.inner_text { color: #f2f2f2;}

 
 
 
スタイルガイド化するとこのような感じでhtmlが吐き出される☟ 

styledocco 
ヤバい超綺麗!!
使用しているマークダウンの説明ですが、

 ■ #見出しの部分の作成。#だったら<h1>、##だったら、<h2>のように吐き出す。
 ■ `(バックティック)3つで囲む事で、デザインのプレビューをするHTMLを吐き出す。

これだけ覚えておけば、Styledocco使う上では問題ないかなと思います! 
 
 

Styledoccoのインストール

 
StyledoccoはNode.jsを使用するため、まずはNode.jsとnpmのインストール☟
Node.jsのサイトからダウンロードして下さい。 
npmはNode.jsからダウンロードしたインストーラーを使えば、自動でインストールされます。
そして次にStyledoccoのインストール☟

npm install -fg styledocco

<!-- インストール出来なかったら -->
sudo npm install -fg styledocco

あとはプロジェクトフォルダに対して、Styledoccoのコマンドを叩くだけ。例えば、、、

Project
┗ css
 ┗ style.css

というフォルダの構成だったら、ターミナルでProjectフォルダに移動して以下のコマンドを入力する。

$ styledocco -n "Style Guide" css/style.css

すると、このようなフォルダとhtmlファイルが生成される。

Project
┗ css
 ┗ style.css
┗ docs
 ┗ index.html
 ┗ style.html

style.htmlを開けば、上記で見せたようなスタイルガイドが生成されているはずです。
styledoccoのコマンドについて説明して行くと、

<!-- プロジェクト名の定義 -->
-n プロジェクト名

<!-- スタイルガイドを作成するディレクトリの指定 -->
-o アウトプットディレクトリ(default: docs)

<!-- プリプロセッサの利用する -->
// --preprocessor プリプロセッサー

<!-- HTMLプレビューに対してCSSやjsのファイルを読み込む -->
// --include プレビューに含むファイルを指定

<!-- コマンドを実行した際にログを表示 -->
// --verbose document生成時に出力するメッセージ (default: false)

・・・!!?
プリプロセッサ来ました。これでかつる。
ということで、SassのスタイルガイドもStyledoccoのコマンドにオプションを付け足すだけで、作れちゃうんです。ぱないの! 
 
 

Sassでもスタイルガイド作成

 
上記でも説明したように、コマンドにオプションを加えます。
例えばこんな感じ!

styledocco -n "styledocco" --preprocessor "sass" sass/style.scss

 

Sassってみたのでも、ちゃんとスタイルガイド化されました☟

styledocco_mixin

注意としては、Compass使うにはちょっと手を加えないといけないみたい☟

Compass / Styledocco Example

そこらへん注意しながら使っていきたいなー。
gruntつかって自動化もできるけど、とりあえずはここまで。
gruntもちっと勉強して、使いこなせるようになったら、ぼちぼち自動化させたいなー! 
 
 

参考記事

CSSプリプロセッサでスタイルガイド | inkdesign
Styledoccoでスタイルガイドを作成 | 69log
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する「styleDocco」の導入とgrunt.jsでの自動化のメモ | mnemoniqs 
 
 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK