vscode-scss
vscode-scss copied to clipboard
Support for Sassdoc blocks
Add support for getting information from sassdoc blocks.
/// This function has a sassdoc block. Also it greets a person :)
/// @param {string} $person
/// @access private
/// @return {string} greets a person.
@function _greet($person) {
@return 'Hello there, #{$person}';
}
Sassdoc blocks can be used on functions, mixins, and variables.
/// Constant. The prefix for the custom properties
/// @type string
/// @access private
$_ds-prefix: '';
/// This function has a sassdoc block. Also it greets a person :)
/// @param {string} $person
/// @access private
/// @return {string} greets a person.
@function _greet($person) {
@return 'Hello there, #{$person}';
}
/// Mixin for applying background colors.
/// @param {string} $component
/// @param {token|color} $color
/// @param {string} $intent
/// @return {void} background color styles.
@mixin fill($component, $color, $intent: 'create') {
@include _validate-color($color) {
@include theme.property(
background-color,
('#{$component}-fill', theme.token-switch($color)),
$intent
);
}
}
Keep in mind, that sassdoc blocks are different from regular sass comments:
// This is a comment, and won't be counted as a sassdoc block
/// This is a sassdoc block. It has three (3) forward slashes instead of the usual two (2).
/// And as you've noticed, github parsed these docblocks as valid docblocks.
/// @type string
/// See. Pretty cool :)
Information about the sassdoc specifications can be found here: http://sassdoc.com/annotations/
Ideally, the plugin should show something like this when hovering a function, mixin, or variable.