vscode-scss

SCSS IntelliSense (Variables, Mixins and Functions) for all files in the workspace.

Donation

Do you like this project? Support it by donating, creating an issue or pull request.

Install

Plugin installation is performed in several stages:

• Press F1 and select Extensions: Install Extensions.
• Search and choose vscode-scss.

See the extension installation guide for details.

Usage

Just install the plugin and use it.

Supported features

• Code Completion Proposals (variables, mixins, functions) — description
• Hover (variables, mixins, functions) — description
• Signature Help (mixins, functions) — description
• Go to (variables, mixins, functions) — description
• Show all All Symbol Definitions in Folder (variables, mixin, functions) — description
• Import files by @import "filepath"; from anywhere. Even outside of the open workspace.
• Support vue file scss block.

Supported settings

scss.scannerDepth

• Type: number
• Default: 30

The maximum number of nested directories to scan.

scss.scannerRootPath

• Type: string
• Default: src/assets/styles

The root path the scanner should scan

scss.scannerExclude

• Type: string[]
• Default: ["**/.git", "**/node_modules", "**/bower_components"]

List of glob patterns for directories that are excluded when scanning.

scss.scanImportedFiles

• Type: boolean
• Default: true

Allows scan imported files.

scss.implicitlyLabel

• Type: string|null
• Default: (implicitly)

The text of a label that the file imported implicitly. If null then label not displayed.

scss.emphaseImplicitImports

• Type: boolean
• Default: false

Add extract text to emphase implicit import variables, mixins and functions.

scss.showErrors

• Type: boolean
• Default: false

Allows to display errors.

scss.suggestVariables

• Type: boolean
• Default: true

Allows prompt Variables.

scss.suggestMixins

• Type: boolean
• Default: true

Allows prompt Mixins.

scss.suggestFunctions

• Type: boolean
• Default: true

Allows prompt Functions.

scss.suggestFunctionsInStringContextAfterSymbols

• Type: boolean
• Default: (+-*%

Allows prompt Functions in String context after specified symbols. For example, if you add the / symbol, then background: url(images/he|) will be suggest hello() function if it is defined.

scss.oneRemInPixel": {

• Type: number
• Default: 16

The value of the root em in pixel

scss.dev.serverPort

• Type: number
• Default: -1

Launches the SCSS IntelliSense server at a specific port for debugging and profiling. Used for filing performance issue.

Questions

I don't see suggestions in the SCSS files.

You must perform several steps:

• Set scss.showErrors option in settings of Editor.
• Restart VS Code.
• Try to reproduce your problem.
• Open Help -> Toggle Developer Tools and copy errors.
• Create Issue on GitHub.

Changelog

See the Releases section of our GitHub project for changelogs for each release version.

License

This software is released under the terms of the MIT license.