@var

Synopsis:

@var
Documentation for SCSS variable.

@var $some-name
Documentation for SCSS variable.

@var {Type} $some-name
Documentation for SCSS variable.

@var {Type} [$some-name="default value"]
Documentation for SCSS variable.

Documents the SCSS variable: its name, type and default value.

Example:

/**
 * @var {color} [$toolbar-color=#000]
 * Default color for text in toolbar.
 */

Auto-detection

Usually the @var tag is only needed to document the type of SCSS variable, as the variable name and it's default value are almost always auto-detected when comment is followed by code like this:

/**
 * @var {font-family}
 * Default font family for text in toolbar.
 */
$toolbar-font-family: "Verdana", "Arial", sans-serif !default;

Some types can also be auto-detected, in which case @var tag isn't needed at all:

/**
 * Default color for text in toolbar.
 */
$toolbar-color: #666 !default;

The following values will trigger auto-detection of the types listed on right hand side:

$foo: 0;        // number
$foo: 15.5;     // number
$foo: 13px;     // length
$foo: 3.5em;    // length
$foo: 50%;      // percentage
$foo: true;     // boolean
$foo: false;    // boolean
$foo: "blah";   // string
$foo: #ccc;     // color
$foo: #FF00FF;  // color
$foo: maroon;   // color
$foo: transparent;           // color
$foo: rgb(255, 0, 0);        // color
$foo: hsla(80%, 0, 0, 0.5);  // color

Note that SCSS variables need to be associated with JavaScript classes through placing @class doc-comment at the top of the file.

NB! SCSS support in JSDuck is still experimental and subject to change.