Some Sass for Visual Studio Code

Some Sass is an extension for Visual Studio Code with full support for @use and @forward – including aliases, prefixes and hiding!

Features:

  • Code suggestions
  • Hover information
  • Rename symbol
  • Go to definition
  • Find all references
  • Signature help
  • Extract refactorings
The extension is shown providing code suggestions from a namespace. Three different mixins are autocompleted. The first with brackets due to being marked with SassDoc as having @content. The second with only the name. The third is completed with parameter names.

Code suggestions can be limited to only include variables, mixins and functions from whatever namespace you're using at the moment.

Namespace aliases are supported, including wildcard. The extension also supports @forward prefixes.

With the recommended settings, which assume no dependance on implicit @import, the extension will omit hidden items from code suggestions.

Great on its own, better with SassDoc

Any SassDoc for mixins, functions or variables is shown on hover. This includes any usage examples that may have been documented.

On the code suggestion front, the extension provides documentation suggestions similar to JS Doc. Just type /// over a mixin or function to get it.

There is also IntelliSense for SassDoc annotations, and hovering over an annotation will show a link to the SassDoc website for documentation and examples.

Finally, if something is marked as @deprecated with SassDoc, the extension will make sure they are shown with a strikethrough.

Runs in the browser

You can use Some Sass anywhere you use Visual Studio Code in the browser.

A nice place to try it is on GitHub, where you can open any repository in a web version of VS Code by hitting the period key inside the repo. Depending on your setup, you may need to go to the Extension Marketplace and install Some Sass manually.

A screen recording that shows code completion from Some Sass working in the web browser. The completion is a mixin for a media query for medium-sized devices. When selected, the extension is shown completing the mixin name including brackets, and focus is moved inside the brackets.

See the rest of the demos

Visit the Releases page on GitHub to see more demos and details about each release .

Where to get it

Get it on the Visual Studio Marketplace or download VSIX files from the Releases page on GitHub.