/sassdoc-to-snippets

Chew up a file or directory of SassDoc-commented Sass, spit out snippets

Primary LanguageJavaScript

SassDoc to Snippets

Convert SassDoc-commented Sass to snippets files.

Ignores privately-scoped mixins/functions/variables.

Can be used in Gulp et al.

Usage

sassdoc-to-snippets ./scss/ -f vscode -o ./scss.json

(requires trailing slash for directories)

Gulp

const sassdocToSnippets = require('sassdoc-to-snippets');

gulp.task('sassdoc-to-snippets', function() {
  return sassdocToSnippets({
    src: './stylesheets/scss/',
    dest: './snippets/scss.json',
  })
});

Flags

  • -o filename: Output to filename
  • -f format: Render snippets in format format
  • -p prefix: Prefix snippet expansions with prefix (for when you're namespacing with Sass modules)
  • --debug: Output the processed SassDoc data as well as the resulting snippets

Example

Input

/// Add padding around an element
///
/// @param {String} $value
@mixin add-padding($value) {
  padding: $value;
}

Output

VSCode

{
  "add-padding": {
    "prefix": "add-padding",
    "description": "Add padding around an element",
    "body": [
      "add-padding(${1:$value})"
    ]
  }
}

Neosnippet (Vim)

snippet add-padding
abbr Add padding around an element
  add-padding(${1:$value})

Contributing

Edit in src, run npm run build to compile.

Know of a snippet syntax for some other editor? Please file an Issue or PR!