読者です 読者をやめる 読者になる 読者になる

みえのじゆうちょう

ゆるふわエンジニャー

SC5使ってみた

スタイルガイドはStyledoccoくらいしか知見がなかったのですが。
最近高機能なものが増えている模様。
という訳で一番気になったSC5を使ってみたのでざっくりと書き残します。

SC5 style guide generator

styleguide.sc5.io

KSSを元に、AngularJSでUIを作られているそうです。
CSSの他、 SASS(SCSS), LESSも対応。

スタイルのサジェスト検索とか、スタイルガイド上で編集ができるとか。とてもクレバー。
ただ、 gitのreadmeにKSSに慣れ親しんでいること。なんて書いてあるので若干ハードルは高そう。
ちなみに私はKSS触ったことないです。

demo

とりあえずどんなものか。というので、demo。

npm install sc5-styleguide
cd node_modules/sc5-styleguide
npm run demo

実行後、http://localhost:3000にアクセスすると、オンラインデモと同様のものがみられます。

スタイルガイドの生成

スタイルガイドの生成はコマンドラインで行います。
コマンドに必要な引数は以下3つ

  • --kssSource(--kss-source): コメントが記述された未コンパイルのファイルを指定(sass, scss, less…)
  • --styleSource(--style-source): コンパイル済みファイルを指定(css)
  • --output: スタイルガイドの出力先

オプションとして--serverをつけるとサーバが起動し、http://localhost:3000で確認できます。

サンプル
styleguide --kss-source static/_scss/**/*.scss --style-source static/css/*.css --output styleguide/ --server

コメントの記述

Styledoccoはマークダウンでスタイルの説明を記述するのですが、SC5は以下のような書き方をします。

// Test container
//
// markup:
// <div class="test">this is sample</div>
//
// Styleguide 1.1

基本的に、KSSがベース。
KSS · Knyle Style Sheets

Designer Tool

デザインガイドをみながら、微調整を行えるという機能。
これはローカルで動いているときのみ、有効な模様。

つかってみて

シンプルに使うのであれば、そこまでAngularの知識はいらなそう。
KSSの記述については知っておく必要ありなので、KSS未経験はハードル高め。
Styledoccoに比べると、取っ付きにくい感じがした。が、私は好きかも。

gulpやgruntを使うこともできそうだし、KSSとの比較もしたいのでもう少しSC5触って書き残して行ければなー。と思っております。