sc5-stylgeduigeの記述方法

sc5-styleguideを使う際に日本語での解説が見つからず。
KSSの記述方法なのか、sc5-stylgeduige特有の記述方法なのかわからないですが、一応メモです。

style.scssファイル内での記述

// 色 /*←セクション名（ページ名）になる*/
// /*←この行も必要っぽい*/
// markUp:/*←これが必要*/
// <p class="red">テキスト赤</p>/*←実際にスタイルガイド内に表示されるHTML*/
// <p class="black">テキスト黒</p>/*←実際にスタイルガイド内に表示されるHTML*/
// /*←この行も必要っぽい*/
// Styleguide 1.0/*←最初が大文字でしっかりStyleguideと書き半角スペース後に章のナンバー 1.0なら1章、1.1なら1章のもうひとつ下のセクション？1となる、番号は上から順でなくてもいいが、ダブるのはだめ*/

//↓スタイル、自由に書く
.red{
  color: #ff0000;
}
.black{
  color: #000000;
}

Overviewファイル

gulpfile.jsのstyleguide:generate内のpipe()内にこんな感じで書く。

.pipe(styleguide.generate({
  title: 'サイトのスタイルガイド',
  server: true,
  rootPath: 'パス',
  overviewPath: 'パス/overview.md',/*overviewファイルの場所を指定*/
  port: 5001,
  basicAuth: {
    username: 'username',
    password: 'password'
  }
}))

_styleguide_variables.scss内の変数はブラウザから変更して保存可能

sc5-styleguideのウリのようだが、変数をブラウザから変更して保存ができる。
_styleguide_variables.scssに

$color-red: #ff0000;

みたいに書いておいて、style.scss内でインポートしておくとスタイルガイドをたちあげた状態で変更保存が可能。

元ファイル

https://github.com/SC5/sc5-styleguide の test/projects 内のどれかを持ってきてコピーして使うのがいい。