gruntを使おう 〜 SASSをドキュメント化するyo 〜

CSSでのコーティング量も増えCSS Preprocessorを使う機会も増しSASSを利用しています。そんなときに使用するのがgrunt-styleguideです。

インストール

npm install grunt-styleguide --save-dev

Gruntfile.jsでの読み込み

grunt.loadNpmTasks('grunt-styleguide');

使い方

grunt.initConfig({
    yeoman: yeomanConfig,
    styleguide: {
        styledocco: {
            options: {
                framework: {
                    name: 'styledocco'
                },
                name: 'Style Guide',
            },
            files: {
                'cssdoc': 'app/styles/*.scss'
            },
        }
    },
})

書き方 

書き方が少し面倒でSASSの中にdocs化するコードを記述します。

@charset "utf-8";

/*
# 見出し

見出しは`.headLine`をベースとする。

背景あり白文字は`.hl1`・背景なし色文字は`.hl2`

```
<div class="headLine hl1">
  <p>見出し</p>
</div>
<div class="headLine hl2">
  <p>見出し</p>
</div>
```
*/

.headLine {
  padding:
  5px 0;
  width:
  100%;
}

.headLine p {
  font-weight: bold;
  font-size: 13px;
}

.hl1 {
  background-color: #FE8528;
}

.hl2 {
  margin-bottom: 0;
}

.hl1 p,.hl3 p {
  padding: 0 0 0 10px;color: #FFFFFF;
}

.hl2 p {
  color: #FF9900;padding: 5px 0;
}

これで実行すると

 かっこいいですよね。尚、このコードは

「http://mnemoniqs.com/web/styledocco/」

を借用しております。申し訳ありません。

最後に

SASSでもちゃんとドキュメント化して保守性を高めましょう。