Edited at

sc5-stylgeduigeの記述方法

More than 3 years have passed since last update.

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 内のどれかを持ってきてコピーして使うのがいい。