Perfect syntax highlighting for both SCSS and Sass.
Latest commit 6556daa Aug 12, 2014 @P233 Merge pull request #44 from builtbylane/patch-1
Background size options
Failed to load latest commit information.
Completions Background size options Aug 11, 2014
Preferences updated uuid May 11, 2014
Syntaxes fix function name after colon Aug 11, 2014
messages messages May 11, 2014
.no-sublime-package Don't zip this package Apr 20, 2014 Update contributors Jul 25, 2014
messages.json messages May 11, 2014

Syntax Highlighting for Sass

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

Built-in Completion Packages

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

Smart Completion Rule

Cancel Completion

Typing @-rule, ID, class, placeholder-selector, mixin name, function name, comment, and quoted content will never popup any completions.

Property-value Completion

When typing property values, property name and other completions will no longer popup.

Sass Scope

source.sass - variable.other.value

SCSS Scope

source.scss - variable.other.value

Mixin Completion

Built-in mixin name completions will only popup directly behind @include or +

Sass Scope


SCSS Scope


Variable Completion

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

Function Completion

Sass Scope

source.sass - variable.other -

SCSS Scope

source.scss - variable.other -

Property-name Completion

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 - - - variable.other.root

SCSS Scope

source.scss - - - variable.other.root

Goto Symbol and Goto Definition

Goto Symbol or Goto Symbol in Project

Goto Definition

Comment Tag

Use {{ and }} to wrap a keyword inside comment, then this keyword (comment tag) will be indexed by the Goto Symbol and Goto Definition features.

Color Scheme

Recommended Color Schemes

Add new one?

Scopes List

Element Scope Selector
Block Comment comment.block.sass
Inline Comment comment.line.sass
Comment Tag comment.tag.sass
Type Selector, Ampersand
Id Selector
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
Property Value,
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
Sass Variable variable
Sass Directive, Directive Shorthand
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

Customise Color Scheme

More information about Scope Selectors and Color Scheme, see Textmate Scope Selectors and Textmate Themes.


mannieschumpert, pepelsbey


nathos's sass-textmate-bundle

Textmate Language Grammars