, ,

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

公開日: 2016/04/21
更新日: 2018/12/26

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

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

Contents

インストール

% npm i -D sassdoc

使い方

実行。

% $(npm bin)/sassdoc source/stylesheets/ --dest docs/sassdoc

コンフィグファイル

標準では .sassdocrc を探す。

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

.sassdoc.json
{
  "dest": "./docs/sassdoc"
}

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

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

記法

  • /// で Description を書く。Markdown が使える。
  • さらに @foo の形式でいろいろと記述できる。
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;
}