Skip to content
A VSCode extension to provide a Tree View of your SASS colors variables
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
media
resources
src
.gitignore
.vscodeignore
README.md
package-lock.json
package.json
tsconfig.json

README.md

Sass Variables Helper

Features

This extension add a new tab in your activity bar with a Tree View of your Sass colors variables. Get an overall look at all your colors easily and copy the associated variable in one click.

After you installed the extension, you have to specify the sass file you want to explore in your workspace settings, like so :

"sassVariablesHelper.route": "/css/root/vars/_colors.scss"

If you have variables that are not colors, you need to wrap your colors variables around comments like below

// COLORS
$maincolor: #26318d;
$maincolor--light: #6f8f9d;
$textcolor: #26318d;
$red: #e40521;
$green: #009f37;
$lightcolor: #fff;
$darkcolor: #000;
$maingrey: #f8f8f8;
$dark-gray: #333;
$darker-gray: #231F20;
$medium-gray: #999;
$light-gray: #EBEBEB;
$grid-border: $light-gray;
// END COLORS

Here is a preview of how it looks Package Explorer

Roadmap

  • Add search and filter
  • Handle multiple files and variables

Thanks to Sangyong Lee from the Noun Project

You can’t perform that action at this time.