How to setup SASSDoc Herman, with configuration example, @examples for mixin functions and variables

README.md

How to run the test docs

• Install sassdoc
• Install Herman Theme
• Create What files and folders we need: Folder / file structure

.
├── .sassdocrc
├── gitignored                      # Just a folder
    └── test-doc                    # Just another folder
        ├── documentation           # Documentation files compilled by Sassdoc will be in this folder
        ├── scss                    # A folder with our SCSS
            ├── _index.scss         # An index of the rest of the files we are going to load
            ├── _mixin.scss         # A file with just a sample mixin
            └── _more-mixins.scss   # Another file with just another mixin 

• On the root of the project create a file .sassdocrc. The document is YAML style, so every single space, empty line etc matters. Keep in mind that there must be an empty new line at the end of the document (no spaces).

    # .sassdocrc (yaml)

    theme: herman
    herman:
        sass:
        includePaths:
            - './gitignored/test-doc'
        includes:
            - 'mixins'

This will look for @mixins, @function etc inside ./gitignored/test-doc/mixins includePaths is the root directory. And then we include the mixins folder, which has an _index.scss file.

• The next step is to run sassdoc "gitignored/test-doc/mixins"

Hopefully it works.

Sources

• Getting Started with Herman
• oddbird/sassdoc-theme-herman#231
• Configuration
• Herman Configuration

_function.scss

/// This is just a test variable
/// @name test-variable
$test-variable: 4;

/// This mixin does this and that
/// @example scss - Test Mixin Example
/// .sin{
///   @include test-mixin(2rem);
/// }
@mixin test-mixin($fs) {
  font-size: $fs;
}

/// This is a function that does blah blah
/// The function also does blah blah
/// @example scss - This is a func example
/// .sin{
///   line-height: text-func($test-variable);
/// }
/// @ignore

@function text-func($number) {
  @return calc(number * 4);
}

_index.scss

@forward 'mixin';
@forward 'more-mixins';

_mixin.scss

/// More Mixins
/// @example scss - More Mixins Example
/// .sin{
///   @include test-mixin(1.5rem);
/// }
@mixin more-test-mixin($fs) {
  font-size: calc($fs * 4);
}