2017.02.21

gulp で sc5-styleguide を使ってスタイルガイドを開発の sass で同期する方法設定編

マークアップエンジニアのうさこです。

寒い日が続きますね…
ちまたではインフルエンザが流行っているそう…
弊社でも猛威を振るっている今日この頃。

わたしは予防対策でアライグマボトルを肩身離さず持ち歩いていますよ。
マスクはしてないけどね！！！

さて、本題に入ります ( ` − ㉨ −´)

目標

開発用とスタイルガイド用で css が分かれていることで、スタイルガイド用の css の更新が厳かになり… 結局、スタイルガイドを使わなくなってしまった…… という経験がある方も多いのではないかと…。

今回は「生きたスタイルガイド」を目指します。

インストール

まず、プロジェクトフォルダで package.json を作成しましょう！

npm init

次に、スタイルガイドの生成に必要な３つのパッケージをインストールしましょう。

npm install --saved-dev gulp gulp-sass sc5-styleguide

オプション –saved-dev をつけることで package.json に自動的に追加することができます！
ちなみに… install は i に、–saved-dev は -D に省略できます。

npm i -D gulp gulp-sass sc5-styleguide

ディレクトリ構成

開発用、確認用、納品用、スタイルガイド用でディレクトリを分けるようにしています。
生きたスタイルガイドを目指すべく、src ディレクトリの sass ファイルから dev ディレクトリに css を、styleguide ディレクトリにスタイルガイドを書き出すようにします。

src/ ← 開発用
    assets/
        /scss
            common.scss
            common_pc.scss
    index.html
dev/ ← 確認用
dist/ ← 納品用
styleguide/ ← スタイルガイド用
    pc/
        README.md
    sp/
        README.md
gulpfile.js
package.json

README 作成

markdown 記法でスタイルガイドの概要を書くことができます。

# [案件名] #

概要を書く

SCSS 設定

// 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;
    }
}

コメントアウトしている部分は sc5-styleguide が準拠している KSS の記法と同じです。
詳しくはこちらを参考にしてみてください！

GitHub – SC5/sc5-styleguide#documenting-syntax

「その2」に続きます！下記の内容を予定しています。