マークアップエンジニアのうさこです。
寒い日が続きますね…
ちまたではインフルエンザが流行っているそう…
弊社でも猛威を振るっている今日この頃。
わたしは予防対策でアライグマボトルを肩身離さず持ち歩いていますよ。
マスクはしてないけどね！！！
さて、本題に入ります ( ` − ㉨ −´)
目次
目標
開発用とスタイルガイド用で css が分かれていることで、スタイルガイド用の css の更新が厳かになり… 結局、スタイルガイドを使わなくなってしまった…… という経験がある方も多いのではないかと…。
今回は「生きたスタイルガイド」を目指します。
インストール
まず、プロジェクトフォルダ で package.json を作成しましょう！
|
1 2 3 |
[sourcecode] npm init [/sourcecode] |
次に、スタイルガイドの生成に必要な３つのパッケージをインストールしましょう。
|
1 2 3 |
[sourcecode] npm install --saved-dev gulp gulp-sass sc5-styleguide [/sourcecode] |
オプション –saved-dev をつけることで package.json に自動的に追加することができます！
ちなみに… install は i に、–saved-dev は -D に省略できます。
|
1 2 3 |
[sourcecode] npm i -D gulp gulp-sass sc5-styleguide [/sourcecode] |
ディレクトリ構成
開発用、確認用、納品用、スタイルガイド用でディレクトリを分けるようにしています。
生きたスタイルガイドを目指すべく、src ディレクトリの sass ファイルから dev ディレクトリに css を、styleguide ディレクトリにスタイルガイドを書き出すようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[sourcecode] src/ ← 開発用 assets/ /scss common.scss common_pc.scss index.html dev/ ← 確認用 dist/ ← 納品用 styleguide/ ← スタイルガイド用 pc/ README.md sp/ README.md gulpfile.js package.json [/sourcecode] |
README 作成
markdown 記法でスタイルガイドの概要を書くことができます。
|
1 2 3 4 5 |
[sourcecode] # [案件名] # 概要を書く [/sourcecode] |
SCSS 設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
[sourcecode lang="css"] // Button // // ボタン要素のモジュールです。 // // .m_btn - デフォルト // .m_btn_next - 前へ // .m_btn_prev - 次へ // // Markup: // <a href="#" class="m_btn {$modifiers}">ボタン<!-- /.m_btn --></a> // // Styleguide 1.0.0 .m_btn { padding: 5px 10px; border-radius: 5px; background-color: #337ab7; &.m_btn_next { background-color: #ff95ac; } &.m_btn_prev { background-color: #ffb96e; } } [/sourcecode] |
コメントアウトしている部分は sc5-styleguide が準拠している KSS の記法と同じです。
詳しくはこちらを参考にしてみてください！
GitHub – SC5/sc5-styleguide#documenting-syntax
「その2」に続きます！下記の内容を予定しています。
- タスク設定
- タスク実行
