vscode-scss icon indicating copy to clipboard operation
vscode-scss copied to clipboard

Support for Sassdoc blocks

Open MatteuSan opened this issue 2 years ago • 0 comments

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.

image

MatteuSan avatar Apr 13 '22 15:04 MatteuSan