SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

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

目次

目標

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

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

インストール

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

npm init

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

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

オプション –saved-dev をつけることで package.json に自動的に追加することができます!
ちなみに… installi に、–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」に続きます!下記の内容を予定しています。

  • タスク設定
  • タスク実行
  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation