Syntax highlighting package for both SCSS and Sass on Sublime Text. Also available for TextMate and Atom.
Install via Package Control.
- Fully support Sass 3.3 syntax
- Match syntax structure instead of keywords, that means support CSS properties which even haven't been published
- Highlight reserved words
and, false, from, in, not, null, or, through, to, true
- Better support for media queries
- Better support for interpolations
- Eight built-in completion packages
- Smart completion rule
- Support Goto Symbol and Goto Definition
- Comment Tag
- Support old indented Sass syntax
:property-name property-value
- Can be used for CSS syntax highlighting
Pick up the package name which you are not intend to use, then add it/them into the ignored_packages
list of your settings file. (If you know a better way to do this please please let me know.)
- SHS-At-Rule
- SHS-Bourbon
- SHS-Bourbon-Neat
- SHS-Compass-Mixins
- SHS-Compass-Variables
- SHS-CSS-Properties
- SHS-CSS-Property-Values
- SHS-Sass-Functions
Typing @-rule, ID, class, placeholder-selector, mixin name, function name, comment, and quoted content will never popup any completions.
When typing property values, property name and other completions will no longer popup.
Sass Scope
source.sass meta.property-list.css.sass - variable.other.value
SCSS Scope
source.scss meta.property-list.css.sass - variable.other.value
Built-in mixin name completions will only popup directly behind @include
or +
Sass Scope
source.sass support.function.name.sass.library
SCSS Scope
source.scss support.function.name.sass.library
There are three types of variable compltions: Root-variable, Value-variable, and Variable (contains the previous two).
Sass Scope
source.sass variable.other.root
SCSS Scope
source.scss variable.other.root
Sass Scope
source.sass variable.other.value
SCSS Scope
source.scss variable.other.value
Sass Scope
source.sass variable.other
SCSS Scope
source.scss variable.other
Sass Scope
source.sass - variable.other - support.function.name.sass.library
SCSS Scope
source.scss - variable.other - support.function.name.sass.library
The latest version of Emmet CSS Snippets now fully supports this feature. I recommend to use it instead of the built-in properties completion package.
Sass Scope
source.sass - meta.property-list - support.function.name.sass.library - variable.other.root
SCSS Scope
source.scss - meta.property-list - support.function.name.sass.library - variable.other.root
Use {{
and }}
to wrap a keyword inside comment, then this keyword (comment tag) will be indexed by the Goto Symbol and Goto Definition features.
- Neon Color Scheme Thanks Matt for adding support for this package
- Perv Color Schemes Thanks Mick for adding support for this package
- Birds of Paradise
- Tomorrow Theme
Element | Scope Selector |
---|---|
Block Comment | comment.block.sass |
Inline Comment | comment.line.sass |
Comment Tag | comment.tag.sass |
At-rule | keyword.control.at-rule.css.sass |
Type Selector, Ampersand | entity.name.tag.css.sass |
Id Selector | entity.other.attribute-name.id.css.sass |
Class Selector | entity.other.attribute-name.class.css.sass |
Placeholder Selector | entity.other.attribute-name.placeholder-selector.sass |
Attribute Selector | entity.other.attribute-selector.sass |
Regex | keyword.other.regex.sass |
Pseudo Class, Pseudo Element | entity.other.attribute-name.pseudo-class.css.sass |
Property Name | support.type.property-name.css.sass |
Property Value | meta.property-value.css.sass, support.constant.property-value.css.sass |
Double Quoted | string.quoted.double.css.sass |
Comma | comment.punctuation.comma.sass |
Numeric | constant.numeric.css.sass |
Unit | keyword.other.unit.css.sass |
Rgb Color | constant.other.color.rgb-value.css.sass |
Function Name | support.function.name.sass |
Sass Variable | variable |
Sass Directive, Directive Shorthand | keyword.control.at-rule.css.sass |
Sass Interpolation | support.function.interpolation.sass |
Sass Flag | keyword.other.important.css.sass |
Sass Operator | keyword.operator.sass |
SCSS Semicolon | comment.punctuation.semicolon.sass |
Sass Semicolon | invalid |
Sass Curly Brackets | invalid |
More information about Scope Selectors and Color Scheme, see Textmate Scope Selectors and Textmate Themes.