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でもちゃんとドキュメント化して保守性を高めましょう。