/vscode-sass-next

Primary LanguageTypeScriptOtherNOASSERTION

GitHub issues Maintenance

Sass Next

Installing

Search for Sass from the extension installer within VSCode or put this into the command palette.

ext install sass-next

Features

Sass Snippets

Abbreviations

Abbreviations

When you type ? a input box will show up, by typing something like .class,m,p and hitting enter a new snippet will be inserted, with this input the created snippet looks like this:

.class
  margin: $1
  padding: $2
$0

the $* sign is where the cursor will be placed, after using this for a bit i must admit that this is not really that useful, but if you type ! in the input box then the extension will search for a html file with the same name in the same directory and will add all the classes and ids to the file for you which i find to be really helpful, if you are in an angular project use " instead in addition to adding all the classes and ids from the html file it also imports the styles.sass file, if it exists.

Abbreviations Example

Sass Snippets

Note: you should also save the snippets in a different file, just to be sure that they don't get lost, some times i still get some weird behavior.

File Structure

The snippets are saved in json files, you can add a local root folder in a workspace folder by creating a sass.snippets.json file in the .vscode folder. You can open a root folders sass.snippets.json file by right clicking and choosing Open File.

{
  "folder or snippet": {
    "children": {},
    "data": { "type": "folder", "position": 0 }
  }
}

In the children property you can add the same thing as many times as you want, all the fields in the example above are required, the position property is used to sort the item in a folder, in theory, doesn't work perfectly at the moment, the type property can be folder or snippet, the data property can have type | position | insert | desc | isOpen as sub properties, insert is the text that will be inserted, remember to escape the $ signs with a \, desc is the description, isOpen determines weather the a folder is open or closed when loading the file for the first time,note that the property doesn't change when opening or closing a folder.

Snippets

Snippets work like vscode snippets, but there is a slight difference, instead of using $anyNumber, use $N for tab stops when inserting the N gets replace by the correct number.

Examples:

Default Snippet Sass Snippet
$[0-9] $N
${[0-9]:abc} ${N:abc}

There is a slight downside to this which is that you can't have something like $0a$2b$1, at least if you use insert folder, if you only insert snippets individually then the normal vscode snippet tab stops work just fine.

Snippets Example

Configuration

Configuration options can be set in the Sass Next section of VSCode settings or by editing your settings.json directly.

General

Option Type Default Description
sass.snippets.path string "none" path for the global snippets file.

Bugs

If you encounter any bugs please open a new issue.

Contributing

The source for this extension is available on github. If anyone feels that there is something missing or would like to suggest improvements please open a new issue or send a pull request! Instructions for running/debugging extensions locally here.

Credits

Changelog

The full changelog is available here: changelog.

License

MIT - https://opensource.org/licenses/MIT