vscode-scss - GitLite

KO | EN

gitlite — search

#python #ai #typescript #android #rust #deep-learning #docker #windows #cli #vue #awesome-list #mcp #openai #open-source

vscode-scss

(★ 180)

:electric_plug: IntelliSense for Variables, Mixins and Functions in all Sass (SCSS syntax only) files.

File Explorer

Download Latest Version (.zip)

- build.yml
- - bug.md
  - perf.md
- FUNDING.yml
- PERF_ISSUE.md
- launch.json
- - _functions.scss
  - _mixins.scss
  - _variables.scss
- - entry.scss
- - language-service.ts
  - server.ts
- client.ts
- constants.ts
.editorconfig
.eslintrc.json
.gitattributes
.gitignore
.mergify.yml
.npmrc
.vscodeignore
CHANGELOG.md
icon.png
LICENSE
package-lock.json
package.json
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/mrmlnc/vscode-scss

Downloads the entire project code from GitHub to your computer.

cd vscode-scss

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/mrmlnc)

## Install

Plugin installation is performed in several stages:

* Press <kbd>F1</kbd> and select `Extensions: Install Extensions`.
* Search and choose `vscode-scss`.

See the [extension installation guide](https://code.visualstudio.com/docs/editor/extension-gallery) for details.

## Usage

Just install the plugin and use it.

## Supported features

* Code Completion Proposals (variables, mixins, functions) — [description](http://code.visualstudio.com/docs/extensions/language-support#_show-code-completion-proposals)
* Hover (variables, mixins, functions) — [description](http://code.visualstudio.com/docs/extensions/language-support#_show-hovers)
* Signature Help (mixins, functions) — [description](http://code.visualstudio.com/docs/extensions/language-support#_help-with-function-and-method-signatures)
* Go to (variables, mixins, functions) — [description](http://code.visualstudio.com/docs/extensions/language-support#_show-definitions-of-a-symbol)
* Show all All Symbol Definitions in Folder (variables, mixin, functions) — [description](http://code.visualstudio.com/docs/extensions/language-support#_show-all-all-symbol-definitions-in-folder)
* 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.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.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.dev.serverPort

* Type: `number`
* Default: `-1`

Launches the SCSS IntelliSense server at a specific port for debugging and profiling. Used for [filing performance issue](./.github/PERF_ISSUE.md).

## 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](https://github.com/mrmlnc/vscode-scss/releases) for changelogs for each release version.

## License

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