Rene Saarsoo edited this page Apr 17, 2015 · 5 revisions

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.