Making Emmet autocompletion work with SCSS in Sublime Text
If you have SCSS and Emmet plugins installed in Sublime Text but tab autocompletion (ex. dib -> display: inline-block) doesn’t work then a solution to make it work is to update the css_completions_scope
Emmet config value.
1. Find the completion scope of SCSS code
In order to find the completion scope place the cursor in Sublime right after the text you want to autocomplete/expand. Then press Shift+Ctrl+P
and check what’s the current scope in Sublime status bar (footer) In my case it was source.scss meta.property-list.scss
2. Get default Emmet CSS completion scope settings
In sublime open default Emmet plugin settings: Preferences -> Package Settings -> Emmet -> Settings - Default and find the css_completions_scope
option. In my case it was
// List of scopes where Emmet CSS completions should be available
"css_completions_scope": "source.css - meta.selector.css - meta.property-value.css, source.scss - meta.selector.scss - meta.property-value.scss, source.less - meta.selector.css - meta.property-value.css",
3. Update Emmet CSS completion scope settings
Now we can update the css_completions_scope
by adding the scope that we found earlier. For this open Preferences -> Package Settings -> Emmet -> Settings - User and add new scope to the list of completions scope:
{
"css_completions_scope": "source.css - meta.selector.css - meta.property-value.css, source.scss - meta.selector.scss - meta.property-value.scss - meta.poperty-list.css, source.less - meta.selector.css - meta.property-value.css, source.scss - meta.poperty-list.scss",
}
Now Emmet expanding should work as expected.