SassDoc

https://sassdoc.com
Admin
SassDoc is a documentation system for Sass that parses source files to generate beautiful,...
Tokens:14,072
Snippets:273
Trust Score:5.2
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install SassDoc Globally

Source: https://sassdoc.com/getting-started

Install SassDoc globally using npm to make the command-line tool available system-wide. This is the first step to start generating documentation.

```bash
npm install sassdoc -g
```

--------------------------------

### Example Annotation Examples

Source: https://sassdoc.com/annotations

Provides examples of the @example annotation for showcasing use cases. It supports syntax highlighting for specified languages and includes optional descriptions.

```sass
/// @example
///   4 + 2 = 6
///   4 / 2 = 2
///
/// @example scss - Clamp function
///   clamp(42, $min: 13, $max: 37)
///   // 37
```

--------------------------------

### SassDoc @example Annotation Example

Source: https://sassdoc.com/data-interface

Illustrates the @example annotation for providing usage examples. Examples can be typed (e.g., 'scss') and include a description and the code itself.

```scss
/// @example scss - basic usage
///   clamp(42, $min: 13, $max: 37)
///   // 37
```

```json
{
  /* ... */
  example: [{
    'type': 'scss',
    'description': 'basic usage',
    'code': 'clamp(42, $min: 13, $max: 37)\n // 37',
  }],
  /* ... */
}
```

--------------------------------

### YAML Configuration Example

Source: https://sassdoc.com/customising-the-view

This is an example of SassDoc configuration in YAML format, demonstrating the same settings as the JSON example.

```yaml
basePath: https://github.com/SassDoc/sassdoc
shortcutIcon: assets/images/favicon.png
display:
    access:
        - public
        - private
    alias: false
    watermark: true

package: ./package.json
theme: default
groups:
    undefined: General

googleAnalytics: UA-XXXXX-YY

tracking: |
  <img src="http://piwik.example.org/piwik.php?idsite={$IDSITE}amp;rec=1" style="border:0" alt="" />

```

--------------------------------

### JSON Configuration Example

Source: https://sassdoc.com/customising-the-view

This is an example of SassDoc configuration in JSON format. It sets the base path, icon, display options, package, theme, groups, and tracking.

```json
{
  "basePath": "https://github.com/SassDoc/sassdoc",
  "shortcutIcon": "assets/images/favicon.png",
  "display": {
    "access": ["public", "private"],
    "alias": false,
    "watermark": true
  },

  "package": "./package.json",
  "theme": "default",
  "groups": {
    "undefined": "General"
  },

  "googleAnalytics": "UA-XXXXX-YY",
  "tracking": "<img src=\"http://piwik.example.org/piwik.php?idsite={$IDSITE}amp;rec=1\" style=\"border:0\" alt=\"" />"
}
```

--------------------------------

### SassDoc @require Annotation Example

Source: https://sassdoc.com/data-interface

Demonstrates the @require annotation (and its synonym @requires) for specifying dependencies. The required item gets a 'usedBy' key, and the referencing item gets a 'require' key with details.

```scss
/// @require {type} item - description <link>
```

```json
{
  /* ... */
  require: [{
    'type': 'type',
    'name': 'item',
    'url': '<link>',
    'description': 'description',
    'item': { /* The whole required item */ },
  }],
  /* ... */
}
```

```json
The referenced item will have a `usedBy` key that looks like:
{
  /* ... */
  usedBy: [{ /* The whole referencing item */ }],
  /* ... */
}
```

--------------------------------

### Description Annotation Example

Source: https://sassdoc.com/annotations

Shows how to provide a description for a documented item, which can span multiple lines and is parsed as Markdown.

```sass
/// Here is the description
/// On several lines if you will
```

--------------------------------

### Comment Range Example

Source: https://sassdoc.com/annotations

Illustrates the structure of a comment range object, indicating the start and end lines of a comment.

```json
{
  "start": 1,
  "end": 3,
}
```

--------------------------------

### Content Annotation Example

Source: https://sassdoc.com/annotations

Demonstrates the @content annotation, used within mixins to describe the usage of the @content directive.

```sass
/// @content [Description]
```

--------------------------------

### SassDoc @access Annotation Example

Source: https://sassdoc.com/data-interface

Demonstrates the @access annotation and its resulting data structure. Use this to define the visibility of your items.

```scss
/// @access private
```

```json
{
  /* ... */
  access: 'private',
  /* ... */
}
```

--------------------------------

### Access Annotation Examples

Source: https://sassdoc.com/annotations

Demonstrates the usage of the @access annotation to define the visibility of a documented item, either 'private' or 'public'.

```sass
/// @access private

/// @access public
```

--------------------------------

### Deprecated Annotation Examples

Source: https://sassdoc.com/annotations

Shows how to mark a documented item as deprecated using the @deprecated annotation. An optional message can be included.

```sass
/// @deprecated

/// @deprecated Deprecation related message
```

--------------------------------

### Example of Group Key After `groupName` Filter

Source: https://sassdoc.com/extra-tools

Shows how the 'group' key is transformed after the `groupName` filter is applied, mapping the slug to a human-readable name.

```json
{
  'group': { 'hacks': 'Dirty Hacks & Fixes' },
}
```

--------------------------------

### Alias Annotation Example

Source: https://sassdoc.com/annotations

Shows how to use the @alias annotation to specify that a documented item is an alias of another item.

```sass
/// @alias other-item
```

--------------------------------

### SassDoc @parameter Annotation Example

Source: https://sassdoc.com/data-interface

Shows the @parameter annotation (and its synonyms) for documenting function or mixin parameters. Each parameter includes type, name, default value, and description.

```scss
/// @param {type} $name [default value] - description
```

```json
{
  /* ... */
  parameter: [{
    'type': 'type',
    'name': 'name',
    'default': 'default value',
    'description': 'description',
  }],
  /* ... */
}
```

--------------------------------

### SassDoc @content Annotation Example

Source: https://sassdoc.com/data-interface

Demonstrates the @content annotation, which captures user-provided content for directives like @for, @each, or @if. The content is stored as a string.

```scss
/// @content The `@content` directive allows user ...
```

```json
{
  /* ... */
  content: 'The `@content` dirctive allows user ...',
  /* ... */
}
```

--------------------------------

### SassDoc @output Annotation Example

Source: https://sassdoc.com/data-interface

Demonstrates the @output annotation (and its synonym @outputs) for describing the output styles of a mixin or function. The description is stored as a string.

```scss
/// @output Description of output styles
```

```json
{
  /* ... */
  output: 'Description of output styles',
  /* ... */
}
```

--------------------------------

### Example of Default Group Key

Source: https://sassdoc.com/extra-tools

Illustrates the default structure for the 'group' key in SassDoc annotations before applying the `groupName` filter.

```json
{
  'group': ['hacks'],
}
```

--------------------------------

### Author Annotation Example

Source: https://sassdoc.com/annotations

Illustrates the use of the @author annotation to specify the author of a documented item. This can be used multiple times.

```sass
/// @author Author's name
```

--------------------------------

### SassDoc @alias Annotation Example

Source: https://sassdoc.com/data-interface

Shows how the @alias annotation works, creating an alias for an item and linking it. The original item will have a 'usedBy' key.

```scss
/// @alias other-item
@mixin alias-for-other-item() { /* ... */ }
```

```json
Item `alias-for-other-item`:
{
  /* ... */
  alias: 'other-item',
  /* ... */
}
```

```json
Item `other-item` will look like this:
{
  /* ... */
  aliased: [{
    /* ... */
    alias: ['alias-for-other-item'],
    /* ... */
  }]
  /* ... */
}
```

--------------------------------

### SassDoc @link Annotation Example

Source: https://sassdoc.com/data-interface

Illustrates the @link annotation (and its synonym @source) for linking to external resources or source code. Each link includes a URL and an optional caption.

```scss
/// @link http://example.com Caption
```

```json
{
  /* ... */
  link: [{
    'url': 'http://example.com',
    'caption': 'Caption',
  }],
  /* ... */
}
```

--------------------------------

### SassDoc @property Annotation Example

Source: https://sassdoc.com/data-interface

Illustrates the @property annotation (and its synonym @prop) for documenting CSS properties within a mixin or function. It includes type, path, default value, and description.

```scss
/// @prop {Function} base.default [default] - description
```

```json
{
  /* ... */
  property: [{
     'type': 'Function',
     'path': 'base.default',
     'default': 'default',
     'description': 'description',
   }],
  /* ... */
}
```

--------------------------------

### SassDoc @group Annotation Example

Source: https://sassdoc.com/data-interface

Demonstrates the @group annotation for categorizing items. Items are grouped into named categories, stored as an array.

```scss
/// @group Groupname
```

```json
{
  /* ... */
  group: ['Groupname'],
  /* ... */
}
```

--------------------------------

### SassDoc @deprecated Annotation Example

Source: https://sassdoc.com/data-interface

Shows the @deprecated annotation, used to mark items that are no longer recommended for use. The reason for deprecation is stored as a string.

```scss
/// @deprecated No longer in use
```

```json
{
  /* ... */
  deprecated: 'No longer in use',
  /* ... */
}
```

--------------------------------

### SassDoc @ignore Annotation Example

Source: https://sassdoc.com/data-interface

Shows the @ignore annotation, which prevents an item from being documented. Ignored items will have an empty 'ignore' array in their data structure.

```scss
/// @ignore Ignore the line
```

```json
{
  /* ... */
  ignore: [],
  /* ... */
}
```

--------------------------------

### SassDoc @author Annotation Example

Source: https://sassdoc.com/data-interface

Illustrates the @author annotation for specifying the author of a code item. The author's name is stored in an array.

```scss
/// @author Fabrice Weinberg
```

```json
{
  /* ... */
  author: ['Fabrice Weinberg'],
  /* ... */
}
```

--------------------------------

### Configure Private Prefix

Source: https://sassdoc.com/customising-the-view

Configure the `privatePrefix` option to control how SassDoc identifies private items. The default regex `^[_-]` assumes items starting with an underscore or hyphen are private.

```yaml
privatePrefix: ^[_-]

```

--------------------------------

### Run SassDoc on Project

Source: https://sassdoc.com/

Execute SassDoc to generate documentation for your Sass project. Specify the source directory as an argument.

```bash
sassdoc source/
```

--------------------------------

### Respond To Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Responsive manager mixin to apply styles based on breakpoints.

```APIDOC
## respond-to

### Description
Responsive manager.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$breakpoint`| Breakpoint| `String`| —none  

### Throws
  * No value found for `#{$breakpoint}`.

### Requires
  * [variable] `breakpoints`
```

--------------------------------

### Configure Base Path for Source Links

Source: https://sassdoc.com/customising-the-view

Set the base path for 'View source' links to your code repository. Ensure the path includes the branch name (e.g., '/tree/master').

```text
https://github.com/sassdoc/sassdoc-theme-default/tree/master/scss/utils/_functions.scss#L13-L37
```

--------------------------------

### Documenting Implementation Version with @since

Source: https://sassdoc.com/annotations

Use @since to specify the version in which a documented item was implemented or updated. The description is optional, and hyphens before the description are also optional. Descriptions are parsed as Markdown.

```sassdoc
/// @since version
/// @since version description
```

--------------------------------

### Configure Shortcut Icon (Favicon)

Source: https://sassdoc.com/customising-the-view

Specify a relative or absolute path for the favicon of your documentation site.

```yaml
shortcutIcon: assets/images/favicon.png
```

--------------------------------

### Configure Project Description

Source: https://sassdoc.com/customising-the-view

Define a project description that is parsed as Markdown and displayed in the documentation. This is more comprehensive than package.description.

```yaml
description: |
  This is the description of the project!

  * It is parsed as markdown.
  * It is displayed in your documentation page.
```

--------------------------------

### Specify Description from File Path

Source: https://sassdoc.com/extra-tools

Provides the path to a file containing the description text. This configuration overrides any raw description text provided directly.

```json
{
  descriptionPath: '../README.md',
}
```

--------------------------------

### Documenting Related Items with @see

Source: https://sassdoc.com/annotations

Use @see to describe items related to the documented item. For dependencies, @require is preferred. The type is optional and defaults to 'function'. Special characters like '$' for variables and '%' for placeholders can be omitted if the type is specified.

```sassdoc
/// @see other-item
/// @see {mixin} other-item
/// @see $other-item
/// @see %other-item
```

--------------------------------

### Commented sed script for C-style comment upgrade

Source: https://sassdoc.com/upgrading

This is a commented breakdown of the sed commands used for upgrading C-style comments. It explains each substitution pattern.

```sed
# Opening (can't determine if poster or normal)
s,^/\*\*,///,

# Poster closing
s,^  *\*\*/,////,

# Normal closing
s,^  *\*/,///,

# Comment body
s,^  *\*,///,
```

--------------------------------

### Require and Use SassDoc Extras

Source: https://sassdoc.com/extra-tools

Demonstrates how to require `sassdoc-extras` and apply its functions to the context object within a theme function. This is the primary method for integrating extra features.

```javascript
var extras = require('sassdoc-extras');

// Your theme function
module.exports = function (dest, ctx) {
  // ...

  extras.markdown(ctx);
};
```

```javascript
extras(ctx, 'markdown', 'display', 'shortcutIcon');
```

--------------------------------

### Run SassDoc Command

Source: https://sassdoc.com/getting-started

Execute SassDoc from the command line, specifying source files or directories. SassDoc can also read from stdin if '-' is provided.

```bash
sassdoc <src>... [options]
sassdoc - [options]
```

--------------------------------

### Configure Description Path

Source: https://sassdoc.com/customising-the-view

Specify a path to an external Markdown file to be used as the project description. This path is relative to the configuration file.

```yaml
descriptionPath: ../README.md
```

--------------------------------

### Configure Sorting Criteria and Order

Source: https://sassdoc.com/extra-tools

Defines the criteria and order for sorting documentation items. Use '<' for ascending and '>' for descending order for each criterion.

```json
{
  sort: [
    'access',
    'line>',
    'group',
    'file',
  ],
}
```

--------------------------------

### Configure Display Access Levels

Source: https://sassdoc.com/extra-tools

Sets the access levels to be displayed. Use this configuration to control whether 'public' or 'private' items are shown in the documentation.

```json
{
  display: {
    access: ['private', 'public'],
  },
}
```

--------------------------------

### Size Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin to set width and height for elements.

```APIDOC
## size

### Description
Mixin to size elements.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$width`| Width| `Number`| —none  
`$height`| Height| `Number`| `$width`
```

--------------------------------

### Define Breakpoints for Responsive Design

Source: https://sassdoc.com/theme-gallery/preview/default

Map of breakpoints for responsive design. Use this to control layout changes at different screen sizes.

```scss
$breakpoints: (
  'small':  (max-width: 800px),
  'medium': (min-width: 801px)
) !global;
```

--------------------------------

### Configure Sorting Criteria

Source: https://sassdoc.com/customising-the-view

Customize the order of items in the documentation using an array of supported criteria (group, file, line, access) with optional sort orders.

```yaml
sort:
  - access
  - line>
  - group
  - file
```

--------------------------------

### Configure Alias Display

Source: https://sassdoc.com/customising-the-view

Enable or disable the display of aliases in the documentation. Default is false.

```yaml
display:
  alias: true
```

--------------------------------

### Helper Mixins

Source: https://sassdoc.com/theme-gallery/preview/default

Mixins for common helper utilities like clearfix, visually-hidden, and ellipsis.

```APIDOC
## clearfix

### Description
Float clearing helper.

### Parameters
- **`$extend`** (Bool) - Optional - Whether or not extend a placeholder. (default: true)

### Requires
- mixin `clearfix`

## visually-hidden

### Description
Accessibility hiding helper.

### Parameters
- **`$extend`** (Bool) - Optional - Whether or not extend a placeholder. (default: true)

### Requires
- mixin `visually-hidden`
- mixin `size`

## ellipsis

### Description
Accessibility ellipsis helper.

### Parameters
- **`$extend`** (Bool) - Optional - Whether or not extend a placeholder. (default: true)

### Requires
- mixin `ellipsis`
```

--------------------------------

### Configure Display Access Levels

Source: https://sassdoc.com/customising-the-view

Control which access levels (public, private) are displayed in the documentation. Default is all.

```yaml
display:
  access:
    - public
```

--------------------------------

### Upgrade C-style comments with Mac/BSD sed

Source: https://sassdoc.com/upgrading

This script performs the same C-style comment conversion as the GNU sed version but is compatible with Mac/BSD sed. Manual review of changes is recommended.

```bash
find . -name '*.s[ac]ss' -exec sed -i '' 's,^/\*\*,///,;s,^  *\*\*/,////,;s,^  *\*/,///,;s,^  *\*,///,' {} +
```

--------------------------------

### Clearfix Placeholder

Source: https://sassdoc.com/theme-gallery/preview/default

A placeholder selector for the clearfix utility.

```scss
%clearfix { ... }
```

--------------------------------

### Configure Google Analytics

Source: https://sassdoc.com/customising-the-view

Set your Google Analytics tracking ID to monitor user behavior on your documentation site.

```yaml
googleAnalytics: UA-XXXXX-YY
```

--------------------------------

### Clearfix Helper

Source: https://sassdoc.com/theme-gallery/preview/default

A clearfix helper mixin to clear floats.

```APIDOC
## clearfix

### Description
Clearfix helper

### Requires
  * [mixin] `clearfix`
```

--------------------------------

### Document Since Version

Source: https://sassdoc.com/data-interface

The @since tag indicates the version in which a documented item was implemented or updated. It accepts a version string and an optional description. The output is an array of objects, each containing 'version' and 'description'.

```sassdoc
/// @since version description
```

```json
{
  /* ... */
  since: [{
    version: 'version',
    description: 'description',
  }],
  /* ... */
}
```

--------------------------------

### Document Return Type and Description

Source: https://sassdoc.com/data-interface

Use the @return tag to specify the type and a description of the value returned by a function or mixin. The output format includes 'type' and 'description' properties.

```sassdoc
/// @return {type} description
```

```json
{
  /* ... */
  'return': {
    type: 'type',
    description: 'description',
  },
  /* ... */
}
```

--------------------------------

### Size Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin to set width and height for elements. `$height` defaults to `$width`.

```scss
@mixin size($width, $height: $width) { ... }
```

--------------------------------

### Describe Mixin Output

Source: https://sassdoc.com/annotations

Use @output to describe what a mixin prints. The description is parsed as Markdown.

```sassdoc
/// @output Description
```

--------------------------------

### Document To-Do Items

Source: https://sassdoc.com/data-interface

The @todo tag is used to mark tasks that need to be done. The output is an array of strings, with each string representing a task description.

```sassdoc
/// @todo Task to be done
```

```json
{
  /* ... */
  todo: ['Task to be done'],
  /* ... */
}
```

--------------------------------

### Process Internal Shortcut Icon Path

Source: https://sassdoc.com/extra-tools

Converts a relative path provided in `ctx.shortcutIcon` into an object with 'type', 'url', and 'path' keys, marking it as 'internal' and resolving the full path.

```json
{
  type: 'internal',
  url: 'icon.png',
  path: '/complete/relative/path/to/icon.png',
}
```

--------------------------------

### Document Function/Mixin Parameters

Source: https://sassdoc.com/annotations

Use @parameter (or its aliases) to document parameters for functions and mixins. Supports type, default values, and descriptions, with types separated by pipes.

```sassdoc
/// @param {type} $name
/// @param {type | othertype} $name
/// @param {type} $name - description
/// @param {type} $name [default value] - description
```

--------------------------------

### On Event Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Event wrapper mixin for applying styles on specific events.

```APIDOC
## on-event

### Description
Event wrapper.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$self`| Whether or not to include current selector| `Bool`| `false`  

### Links
  * Original tweet from Harry Roberts

### Author
  * Harry Roberts
```

--------------------------------

### Upgrade C-style comments with GNU sed

Source: https://sassdoc.com/upgrading

Use this script to convert C-style comments (\/\*\*) to SassDoc's \/\/\/ format. Run in a version-controlled environment and review changes carefully.

```bash
find . -name '*.s[ac]ss' -exec sed -i 's,^/\*\*,///,;s,^  *\*\*/,////,;s,^  *\*/,///,;s,^  *\*,///,' {} +
```

--------------------------------

### Specify Item Requirements

Source: https://sassdoc.com/annotations

Use @require to define dependencies on other items. Supports specifying item type, description, and an optional link. The required item will list the current item in its 'usedBy' key.

```sassdoc
/// @require item
/// @require {type} item
/// @require {type} item - description
/// @require {type} item description
/// @require {type} item <link>
/// @require {type} item description <link>
```

--------------------------------

### Update Node module export from documentize to default

Source: https://sassdoc.com/upgrading

Demonstrates the change in how to call the main SassDoc function in Node.js. The `documentize` function is now the default export.

```javascript
var sassdoc = require('sassdoc');

sassdoc.documentize('scss/').then(function () {
  console.log('All done!');
});
```

```javascript
var sassdoc = require('sassdoc');

sassdoc('scss/').then(function () {
  console.log('All done!');
});
```

--------------------------------

### Responsive Manager Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin for managing responsive breakpoints. Requires the `breakpoints` variable. Throws an error if the breakpoint is not found.

```scss
@mixin respond-to($breakpoint) { ... }
```

--------------------------------

### Process External Shortcut Icon URL

Source: https://sassdoc.com/extra-tools

Converts an absolute URL provided in `ctx.shortcutIcon` into an object with 'type', 'url', and 'path' keys, marking it as 'external'.

```json
{
  type: 'external',
  url: 'http://absolute.path/to/icon.png',
}
```

--------------------------------

### Position Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for positioning elements. Requires the `position` mixin.

```scss
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { ... }
```

--------------------------------

### When Inside Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin for applying styles when an element is inside a specific context.

```APIDOC
## when-inside

### Description
Contexts

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$context`| —none| `String` or `List`| —none  

### Author
  * Hugo Giraudel
```

--------------------------------

### Clearfix Helper Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

A float clearing helper mixin. It can optionally extend a placeholder.

```scss
@mixin clearfix($extend: true) { ... }
```

--------------------------------

### Cross-Browser Support Mixins

Source: https://sassdoc.com/theme-gallery/preview/default

Mixins for handling cross-browser compatibility for CSS animations and properties.

```APIDOC
## keyframes

### Description
Mixin to handle cross browser keyframes for CSS animations.

### Parameters
- **`$name`** (String) - Required - Animation name

## prefixer

### Description
Mixin to prefix properties that are not prefixed by Compass.

### Parameters
- **`$property`** (String) - Required - Property to prefix
- **`$value`** (Any) - Required - Value for property
- **`$vendors`** (List) - Optional - Vendor prefixes to output (default: 'webkit' 'moz' 'ms' 'o')

### Example
```scss
@include prefixer('transform', 'translate(10px)');
```

## opacity

### Description
Mixin for cross-browser opacity (IE 8). Clamps the value between 0 and 1.

### Parameters
- **`$opacity`** (Number) - Required - Opacity level, between 0 and 1

### Requires
- mixin `opacity`
- function `clamp`
```

--------------------------------

### Position Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for positioning elements with absolute, fixed, or relative values.

```APIDOC
## position

### Description
Shorthand for positioning.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$position`| Position type (either `absolute`, `fixed` or `relative`)| `String`| —none  
`$top`| Top offset| `Length`| `null`  
`$right`| Right offset| `Length`| `null`  
`$bottom`| Bottom offset| `Length`| `null`  
`$left`| Left offset| `Length`| `null`
```

--------------------------------

### Configure Custom Tracking Code

Source: https://sassdoc.com/customising-the-view

Inject a custom tracking code snippet directly into the DOM. Be cautious of potential JavaScript injection vulnerabilities.

```yaml
trackingCode: |
  <img src="http://piwik.example.org/piwik.php?idsite={$IDSITE}amp;rec=1" style="border:0" alt="" />
```

--------------------------------

### Fixed Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for fixed positioning.

```APIDOC
## fixed

### Description
Shorthand for fixed positioning.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$args`| Offsets| `Arglist`| —none  

### Requires
  * [mixin] `position`
```

--------------------------------

### Ellipsis Helper

Source: https://sassdoc.com/theme-gallery/preview/default

An accessibility helper mixin for ellipsis.

```APIDOC
## ellipsis

### Description
Accessibility ellipsis helper.

### Requires
  * [mixin] `ellipsis`
```

--------------------------------

### Relative Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for relative positioning.

```APIDOC
## relative

### Description
Shorthand for relative positioning.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$args`| Offsets| `Arglist`| —none  

### Requires
  * [mixin] `position`
```

--------------------------------

### Clearfix Helper Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

A mixin to clear floats. Requires the `clearfix` mixin.

```scss
%visually-hidden { ... }
```

--------------------------------

### General Functions

Source: https://sassdoc.com/theme-gallery/preview/default

Utility functions for manipulating values, directions, and managing z-index.

```APIDOC
## opposite-direction

### Description
Returns the opposite direction of every direction in `$directions`.

### Parameters
- **`$directions`** (List) - Required - Positions to revert

### Returns
`List` or `Null`

### Throws
- No opposite direction found for `$direction`.

## clamp

### Description
Clamp `$value` between `$min` and `$max`.

### Parameters
- **`$value`** (Number) - Required - Value to clamp between `$min` and `$max`
- **`$min`** (Number) - Required - Minimum value
- **`$max`** (Number) - Required - Maximum value

### Returns
`Number` or `Null`

### Throws
- All parameters must be numbers for `clamp`.

### Used by
- mixin `opacity`
- mixin `card`

## z

### Description
Helper to manage `z-index`. Tries to fetch the z-index mapped to `$layer` in `$z-indexes` map. If found, returns it, else returns `null`.

### Parameters
- **`$layer`** (String) - Required - Layer

### Returns
`Number` or `Null`

### Example
```scss
z-index: z("default");
```

### Throws
- No z-index found for `$layer`.

### Requires
- variable `z-indexes`

## is-valid-length

### Description
Tests whether the value is a valid length.

### Parameters
- **`$value`** (Any) - Required - Value to test

### Returns
`Bool`

## top-shadow

### Description
Computes a top-shadow for a card effect.

### Parameters
- **`$depth`** (Number) - Required - depth level

### Returns
`List`

### Used by
- mixin `card`

## bottom-shadow

### Description
Computes a bottom-shadow for a card effect.

### Parameters
- **`$depth`** (Number) - Required - depth level

### Returns
`List`

### Used by
- mixin `card`
```

--------------------------------

### Update annotation parentheses to brackets with BSD/Mac sed

Source: https://sassdoc.com/upgrading

This script updates parentheses to square brackets for default values in @param and @prop annotations, compatible with BSD/Mac sed. Manual review is essential.

```bash
find . -type f -name '*.s[ac]ss' -exec sed -Ei '' '/@param|@prop/y/\(\)/\\\[\\\]/' {} +
```

--------------------------------

### Accessibility Hiding Helper Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

A mixin for accessibility hiding. Requires the `visually-hidden` mixin.

```scss
%ellipsis { ... }
```

--------------------------------

### Describe Function Return Value

Source: https://sassdoc.com/annotations

Use @return (or @returns) to describe the return value of a function. Supports specifying type, optional description, and multiple types separated by pipes.

```sassdoc
/// @return {type}

/// @return {type | othertype}

/// @return {type} description
```

--------------------------------

### Link to External or Internal Resources

Source: https://sassdoc.com/annotations

Use @link to describe a link, optionally with a caption. This can point to external URLs or internal Sass items.

```sassdoc
/// @link http://some.url
/// @link http://some.url Optional caption
```

--------------------------------

### Ellipsis Helper Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

An accessibility helper mixin for handling ellipsis. It can optionally extend a placeholder.

```scss
@mixin ellipsis($extend: true) { ... }
```

--------------------------------

### Absolute Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for absolute positioning, useful for stretching elements.

```APIDOC
## absolute

### Description
Shorthand for absolute positioning.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$args`| Offsets| `Arglist`| —none  

### Example
Stretch an item over its parent.
```
 @include absolute($top: 0, $right: 0, $bottom: 0, $left: 0)
```

### Requires
  * [mixin] `position`
```

--------------------------------

### When Inside Context Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin for applying styles when an element is inside a specific context.

```scss
@mixin when-inside($context) { ... }
```

--------------------------------

### Documenting Tasks with @todo

Source: https://sassdoc.com/annotations

Use @todo to define any tasks that need to be done regarding the documented item. This annotation is parsed as Markdown.

```sassdoc
/// @todo Task to be done
```

--------------------------------

### Update CLI destination argument to option

Source: https://sassdoc.com/upgrading

Shows the change in SassDoc CLI usage from a positional argument for the destination to an optional `--dest` flag. The destination is now optional.

```bash
sassdoc scss/ doc/
```

```bash
sassdoc scss/ --dest doc/
```

--------------------------------

### Top Shadow Computation Function

Source: https://sassdoc.com/theme-gallery/preview/default

Computes a top shadow for card effects based on a depth level.

```scss
@function top-shadow($depth) { ... }
```

--------------------------------

### Fixed Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for fixed positioning. Requires the `position` mixin.

```scss
@mixin fixed($args...) { ... }
```

--------------------------------

### Inline Block Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin for handling inline-block and vertical-align.

```APIDOC
## inline-block

### Description
Mixin handling inline-block and vertical-align at once. If no align is specified, then the `vertical-align` property won't be output.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$align`| Vertical align| `String`| `null`
```

--------------------------------

### Visually Hidden Helper

Source: https://sassdoc.com/theme-gallery/preview/default

An accessibility helper mixin to visually hide elements.

```APIDOC
## visually-hidden

### Description
Accessibility hiding helper.

### Requires
  * [mixin] `visually-hidden`
```

--------------------------------

### Bottom Shadow Computation Function

Source: https://sassdoc.com/theme-gallery/preview/default

Computes a bottom shadow for card effects based on a depth level.

```scss
@function bottom-shadow($depth) { ... }
```

--------------------------------

### Define Sidebar Width

Source: https://sassdoc.com/theme-gallery/preview/default

Sets the fixed width for the sidebar component.

```scss
$sidebar-width: 280px;
```

--------------------------------

### Relative Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for relative positioning. Requires the `position` mixin.

```scss
@mixin relative($args...) { ... }
```

--------------------------------

### Document Thrown Errors

Source: https://sassdoc.com/data-interface

Use the @throw tag (or its synonyms @throws, @exception) to document potential errors. The output is an array of strings, where each string is an error-related message.

```sassdoc
/// @throw Error related message
```

```json
{
  /* ... */
  'throw': ['Error related message'],
  /* ... */
}
```

--------------------------------

### Event Wrapper Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

A mixin for wrapping event listeners. `$self` determines if the current selector is included.

```scss
@mixin on-event($self: false) { ... }
```

--------------------------------

### Z-index Management Function

Source: https://sassdoc.com/theme-gallery/preview/default

Manages z-index by fetching values from the `$z-indexes` map. Returns the z-index for a given layer or null if not found.

```scss
@function z($layer) { ... }
```

```css
z-index: z("default")
```

--------------------------------

### Cross-browser Prefixer Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

This mixin prefixes CSS properties that are not automatically handled by Compass. Specify the property, value, and optionally the vendor prefixes.

```scss
@mixin prefixer($property, $value, $vendors: 'webkit' 'moz' 'ms' 'o') { ... }
```

```scss
@include prefixer('transform', 'translate(10px)');
```

--------------------------------

### Documenting Thrown Errors with @throw

Source: https://sassdoc.com/annotations

Use @throw to describe errors that might be thrown by the documented item. This annotation is parsed as Markdown.

```sassdoc
/// @throw Error related message
```

--------------------------------

### Define Z-Index Layers

Source: https://sassdoc.com/theme-gallery/preview/default

Map of z-indexes for layering elements. Aliases are provided for common elements like modals and dropdowns.

```scss
$z-indexes: (
  'goku':       9001,
  'modal':      5000,
  'dropdown':   4000,
  'social':     3000,
  'default':       1,
  'below':        -1
) !global;
```

--------------------------------

### Light Grey Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the light grey color. Used by the `card` mixin.

```scss
$light-grey: #e0e0e0;
```

--------------------------------

### Update annotation parentheses to brackets with GNU sed

Source: https://sassdoc.com/upgrading

Converts parentheses to square brackets for default values in @param and @prop annotations. Review changes manually as it affects all parentheses in matching lines.

```bash
find . -type f -name '*.s[ac]ss' -exec sed -ri '/@param|@prop/y/()\[\]/' {} +
```

--------------------------------

### Absolute Positioning Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Shorthand for absolute positioning. Use to stretch an item over its parent. Requires the `position` mixin.

```scss
@mixin absolute($args...) { ... }
```

```scss
@include absolute($top: 0, $right: 0, $bottom: 0, $left: 0)
```

--------------------------------

### Cross-browser Keyframes Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Use this mixin to handle cross-browser compatibility for CSS animations defined with keyframes.

```scss
@mixin keyframes($name) { ... }
```

--------------------------------

### Card Depth Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Gives an element a card-like depth effect. Requires `clamp`, `top-shadow`, `bottom-shadow` functions and `light-grey` variable.

```scss
@mixin card($depth) { ... }
```

--------------------------------

### Primary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Sets the primary color to `$pink`.

```scss
$primary-color: $pink;
```

--------------------------------

### Light Grey Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the light grey color.

```APIDOC
## light-grey

### Description
Light grey

### Type
`Color`

### Used by
  * [mixin] `card`
```

--------------------------------

### Documenting Variable Types with @type

Source: https://sassdoc.com/annotations

Use @type to describe the type of a documented variable. Multiple types can be specified by separating them with pipes ('|').

```sassdoc
/// @type Bool

/// @type Bool | String
```

--------------------------------

### Ignore Item from Documentation

Source: https://sassdoc.com/annotations

Use @ignore to exclude a line from the generated documentation. This is useful for internal notes or non-documented code.

```sassdoc
/// @ignore Message
```

--------------------------------

### Define Group Aliases for Display Names

Source: https://sassdoc.com/extra-tools

Maps group slugs to human-friendly names for better presentation in documentation. This overrides the default group key for items.

```json
{
  groups: {
    undefined: 'Private',
    api: 'API',
    hacks: 'Dirty Hacks & Fixes',
  },
}
```

--------------------------------

### Card Depth Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin to apply a card depth effect with shadows.

```APIDOC
## card

### Description
Gives a card depth effect.

### Parameters
parameterName| parameterDescription| parameterType| parameterDefault value  
---|---|---|---  
`$depth`| depth level [between 1 and 5]| `Number`| —none  

### Requires
  * [function] `clamp`
  * [function] `top-shadow`
  * [function] `bottom-shadow`
  * [variable] `light-grey`

### Links
  * Google Design
```

--------------------------------

### Cross-browser Opacity Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Ensures cross-browser opacity, specifically for older IE versions (IE 8). It clamps the opacity value between 0 and 1.

```scss
@mixin opacity($opacity) { ... }
```

--------------------------------

### Inline-Block Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

Mixin for handling `inline-block` and `vertical-align`. If `$align` is not specified, `vertical-align` will not be output.

```scss
@mixin inline-block($align: null) { ... }
```

--------------------------------

### Visually Hidden Accessibility Mixin

Source: https://sassdoc.com/theme-gallery/preview/default

An accessibility helper mixin to hide elements visually. It can optionally extend a placeholder.

```scss
@mixin visually-hidden($extend: true) { ... }
```

--------------------------------

### Clamp Value Function

Source: https://sassdoc.com/theme-gallery/preview/default

Clamps a given value between a specified minimum and maximum. All parameters must be numbers.

```scss
@function clamp($value, $min, $max) { ... }
```

--------------------------------

### Provide Custom Item Name

Source: https://sassdoc.com/annotations

Use @name to specify a custom name for the documented item, overriding the automatically parsed name. This is useful for complex or dynamic naming.

```sassdoc
/// @name message-[error|warning|success|info]
```

--------------------------------

### Pink Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the pink color.

```scss
$pink: #dd5a6f;
```

--------------------------------

### Pink Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the pink color.

```APIDOC
## pink

### Description
Pink

### Type
`Color`
```

--------------------------------

### Document Map Properties

Source: https://sassdoc.com/annotations

Use @property (or @prop) to document properties of maps, using dot notation for nesting. The type defaults to 'Map' if omitted.

```sassdoc
/// @prop {Type} base.default [default] - description
```

--------------------------------

### Define Text Font Stack

Source: https://sassdoc.com/theme-gallery/preview/default

List of preferred fonts for body text, providing fallbacks for broader compatibility.

```scss
$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
```

--------------------------------

### Sass Variables for Resolution

Source: https://sassdoc.com/extra-tools

Defines Sass variables, including a color alias and a map of colors, to demonstrate variable aliasing and usage in mixins.

```sass
/// Blue
/// @type Color
$color-blue: #22b8dc;

/// Main color
/// @type Color
$color-main: $color-blue;

/// Map of colors.
/// @prop {Color} main [$color-blue] - main color
/// @type Map
$colors: (
  'main': $color-blue,
);

/// Example mixin.
/// @param {Color} $color [$color-main] - configurable background color
@mixin foobar($color: $color-main) { ... }
```

--------------------------------

### Primary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the primary color, aliased to pink.

```APIDOC
## primary-color

### Description
Primary color

### Type
`Color`
```

--------------------------------

### Disable Watermark

Source: https://sassdoc.com/customising-the-view

Turn off the default SassDoc watermark in the footer. It is recommended to leave it enabled for promotion.

```yaml
display:
  watermark: false
```

--------------------------------

### SassDoc Sorted Items Array

Source: https://sassdoc.com/data-interface

SassDoc collects all processed items into an array, which is then sorted by group, file path, and position within the file.

```json
[
  { /* Item */ },
  { /* Item */ },
]
```

--------------------------------

### Define Vertical Rhythm Unit

Source: https://sassdoc.com/theme-gallery/preview/default

Sets the base unit for vertical spacing, ensuring consistent line heights and margins.

```scss
$vertical-rhythm: 1.5rem;
```

--------------------------------

### Opposite Direction Function

Source: https://sassdoc.com/theme-gallery/preview/default

Returns the opposite direction for each direction provided in a list.

```scss
@function opposite-direction($directions) { ... }
```

--------------------------------

### Medium Grey Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the medium grey color.

```APIDOC
## medium-grey

### Description
Medium

### Type
`Color`
```

--------------------------------

### Medium Grey Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the medium grey color.

```scss
$medium-grey: #ddd;
```

--------------------------------

### Define Code Font Stack

Source: https://sassdoc.com/theme-gallery/preview/default

List of preferred monospace fonts for code blocks, ensuring readability and consistent character spacing.

```scss
$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;
```

--------------------------------

### Black Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the black color.

```scss
$black: #333;
```

--------------------------------

### Black Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the black color.

```APIDOC
## black

### Description
Black

### Type
`Color`
```

--------------------------------

### Define Item Group

Source: https://sassdoc.com/annotations

Use @group to assign a documented item to a specific group for display in SassDoc's default theme. Groups can be aliased in the configuration for friendly names.

```sassdoc
/// @group helpers
```

--------------------------------

### Purple Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the purple color.

```scss
$purple: #5c4863;
```

--------------------------------

### SassDoc Item Data Structure

Source: https://sassdoc.com/data-interface

This is the base structure for a SassDoc item, representing variables, functions, mixins, or placeholders. It includes description, context, access, and group information.

```json
{
  description: '',
  context: {
    name: '',
    type: '',
    code: '',
    line: {
      start: 0,
      end: 0,
    },
  },
  access: ['public'],
  group: ['undefined'],
}
```

--------------------------------

### Purple Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the purple color.

```APIDOC
## purple

### Description
Purple

### Type
`Color`
```

--------------------------------

### Document Data Type

Source: https://sassdoc.com/data-interface

The @type tag specifies the data type of a variable, property, or parameter. It accepts a string representing the type, which can include multiple types separated by '|'.

```sassdoc
/// @type bool | string
```

```json
{
  /* ... */
  type: 'bool | string',
  /* ... */
}
```

--------------------------------

### Secondary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Sets the secondary color to `$yellow`.

```scss
$secondary-color: $yellow;
```

--------------------------------

### Valid Length Test Function

Source: https://sassdoc.com/theme-gallery/preview/default

Tests whether a given value is a valid CSS length.

```scss
@function is-valid-length($value) { ... }
```

--------------------------------

### Yellow Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the yellow color.

```scss
$yellow: #ffc93c;
```

--------------------------------

### Secondary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the secondary color, aliased to yellow.

```APIDOC
## secondary-color

### Description
Primary color

### Type
`Color`
```

--------------------------------

### Yellow Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the yellow color.

```APIDOC
## yellow

### Description
Yellow

### Type
`Color`
```

--------------------------------

### Default Variable Data

Source: https://sassdoc.com/extra-tools

Represents the default data structure for Sass variables before variable resolution.

```json
{
  "description": "<p>Blue</p>\n",
  "context": {
    "type": "variable",
    "name": "color-blue",
    "value": "#22b8dc"
  },
  "type": "Color"
},
{
  "description": "<p>Main color</p>\n",
  "context": {
    "type": "variable",
    "name": "color-main",
    "value": "$color-blue"
  },
  "type": "Color"
}
```

--------------------------------

### Tertiary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Sets the tertiary color to `$purple`.

```scss
$tertiary-color: $purple;
```

--------------------------------

### Resolved Variable Data

Source: https://sassdoc.com/extra-tools

Shows the data structure for Sass variables after applying the `resolveVariables` filter, including the `resolvedValue` key.

```json
{
  "description": "<p>Blue</p>\n",
  "context": {
    "type": "variable",
    "name": "color-blue",
    "value": "#22b8dc"
  },
  "type": "Color",
  "resolvedValue": "#22b8dc"
},
{
  "description": "<p>Main color</p>\n",
  "context": {
    "type": "variable",
    "name": "color-main",
    "value": "$color-blue"
  },
  "type": "Color",
  "resolvedValue": "#22b8dc"
}
```

--------------------------------

### Tertiary Color Variable

Source: https://sassdoc.com/theme-gallery/preview/default

Defines the tertiary color, aliased to purple.

```APIDOC
## tertiary-color

### Description
Primary color

### Type
`Color`
```
Tokens:
Raw