Some Sass for Visual Studio Code
Some Sass is a language server extension for Visual Studio Code. It brings improved code suggestions, documentation and code navigation for SCSS.
Some features include:
- Full support for
@use
and @forward
, including aliases, prefixes and hiding.
- Workspace-wide code navigation and refactoring, such as Rename Symbol.
- Rich documentation through SassDoc.
- Language features for
%placeholders
, both when using them and writing them.
User guide
See the user guide to get the most out of Some Sass. There you'll find more about:
- IntelliSense: Code suggestions that understand the Sass module system, and much more.
- Navigation: Go to definition, find all references, and more.
- Hover info: Surface your SassDoc documentation.
- Refactoring: Rename symbols across your whole workspace.
- Diagnostics: See deprecated symbols at a glance.
- Color decorators: Get color previews where you use them.
Recommended settings
These are the recommended settings:
{
// Recommended if you don't rely on @import
"somesass.suggestOnlyFromUse": true,
// Optional, if you get suggestions from the current document after namespace.$ (you don't need the $ for narrowing down suggestions)
"editor.wordBasedSuggestions": false,
// Optional, for Vue, Svelte, Astro: add `scss` to the list of excluded languages for Emmet to avoid suggestions in Vue, Svelte or Astro files.
// VS Code understands that <style lang="scss">`blocks are SCSS, and so won't show Emmet suggestions in that block.
"emmet.excludeLanguages": [
// Markdown is excluded by default in VS Code
"markdown",
"scss",
],
}
Note that if you have SCSS IntelliSense (mrmlnc.vscode-scss
) installed you should disable or uninstall it. Otherwise the two extensions will both provide hover information and code suggestions.
About word-based suggestions
When you get completion suggestions and type namespace.$
, Visual Studio Code treats $
as a fresh start for suggestions. It will start matching any variable in the current document. There are two ways to get around this:
- Turn off word-based suggestions by setting
"editor.wordBasedSuggestions": false
.
- Don't type the
$
when you write the variable name, let completions fill it out for you.
With the second approach you can keep word-based suggestions turned on.
Settings reference
See the settings reference for more information about the different settings of Some Sass.
Changelog
Visit the release section on GitHub to see what has changed.
Acknowledgements
Began as SCSS Intellisense by Denis Malinochkin and contributors. Extends the built-in VS Code language server for SCSS.
The logo is owned by the Sass project and licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Includes documentation from sass/sass-site (MIT).