[Front-End General] SASS のドキュメンテーションツール SassDoc

SASS ファイル内のコメントから、ドキュメントを自動生成。

[markdown]
mixins, variables, functions にコメントを付けておけば、一覧化されたドキュメントが生成される。

> * [presentation-sassdoc](http://slidedeck.io/geckotang/presentation-sassdoc)

## インストール

> * [Release the docs!](http://sassdoc.com/)
> * [SassDoc](https://github.com/SassDoc/)

“`prettyprinted
% npm i -D sassdoc
“`

## 使い方

実行。

> * [Getting started](http://sassdoc.com/getting-started/)

“`prettyprinted
% $(npm bin)/sassdoc source/stylesheets/ –dest docs/sassdoc
“`

### コンフィグファイル

標準では `.sassdocrc` を探す。

> * [Configuration](http://sassdoc.com/configuration/)

以下のファイルを用意した場合、

“`json:.sassdoc.json
{
“dest”: “./docs/sassdoc”
}
“`

以下のように実行できる。

“`prettyprinted
% $(npm bin)/sassdoc source/stylesheets/ -c .sassdoc.json
“`

### 記法

– `///` で Description を書く。Markdown が使える。
– さらに `@foo` の形式でいろいろと記述できる。

> * [Annotations](http://sassdoc.com/annotations/)

“`scss:sample.scss
////
/// @group helpers
/// @author deadwood
////
/// CSS で下向きの矢印を生成する
/// @param {Number} $width – 数値
/// @param {Number} $height – 数値
/// @param {String} $color[#ccc] – hex-color
@mixin arrow-down($width, $height, $color: #ccc) {
width: 0;
height: 0;
border-style: solid;
border-width: $height $width 0;
border-color: $color transparent transparent;
}
“`
[/markdown]