Syntax Highlighting for Sass


更新时间:2016-12-14 16:58:11


版本支持:sublime text 2,sublime text 3

系统支持: Windows,OS X,Linux

所属分类:language syntax


插件介绍:Perfect syntax highlighting for both SCSS and Sass.

详细介绍: --



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

language syntax snippets color scheme linting theme auto-complete text manipulation formatting javascript build system utilities completions syntax file navigation php python html go markdown search testing code navigation documentation git ruby language text navigation autocomplete vcs utils lua coffeescript latex sass build highlighting text selection java diff scala terminal addon preview todo scss js Completion automation snippet comments nsis svn file creation formatter project sidebar commands console test less repl indent code sharing C hg monokai clipboard file open perl tasks nodejs sync android C++ react japanese editor json markup code style Jasmine editor emulation es6 font diff/merge material jsx syntax highlight docs translate textile code generation debugging sql google node minification laravel typescript cursors manipulation golang save workspace haskell emacs file logs command line wordpress templating compare matlab precompiler watch xml window hexadecimal difference st3 ember jade stylus notes backup indentation browser share rust julia ide make debug angular groovy 中文 unit test converter vhdl utility plugin development unicode restructuredtext apicloud coding Clang spec ftp icons lisp text format grails remote collaboration merge R rubymotion framework file comparison codex sublime svg dark email CSS commit open files stata ruby on rails logger pattern writing convert cli fullscreen validate copy calculator coffee hint icon_fonts code Debugger preferences automate colour input method intellisense converting tidy bash package oracle conflicts pandoc