ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Syntax Highlighting for Sass

by P233 ST2/ST3

Perfect syntax highlighting for both SCSS and Sass.

Details

Installs

  • Total 47K
  • Win 16K
  • OS X 25K
  • Linux 6K
Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5
Windows 15 14 34 36 42 39 33 24 18 63 44 40 52 39 17 27 37 51 45 48 39 32 23 33 54 43 33 42 16 21 31 31 31 50 53 19 27 45 50 40 52 61 22 24 40 54
OS X 15 21 47 59 62 54 50 27 24 78 70 63 70 50 23 36 48 56 69 50 51 29 45 60 48 58 60 56 21 25 38 65 55 58 63 37 21 42 69 75 65 89 26 19 53 51
Linux 6 8 14 16 11 14 9 12 7 23 17 12 14 10 5 11 11 5 11 10 11 7 6 20 8 13 14 8 10 7 11 20 17 7 18 13 7 6 13 12 7 12 9 6 12 15

Readme

Source
raw.​githubusercontent.​com

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.

Features:

  • 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 meta.property-list.css.sass - variable.other.value

SCSS Scope

source.scss meta.property-list.css.sass - variable.other.value

Mixin Completion

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

Variable Completion

There are three types of variable compltions: Root-variable, Value-variable, and Variable (contains the previous two).

Root-variable

Sass Scope

source.sass variable.other.root

SCSS Scope

source.scss variable.other.root
Value-variable

Sass Scope

source.sass variable.other.value

SCSS Scope

source.scss variable.other.value
Variable

Sass Scope

source.sass variable.other

SCSS Scope

source.scss variable.other

Function Completion

Sass Scope

source.sass - variable.other - support.function.name.sass.library

SCSS Scope

source.scss - variable.other - support.function.name.sass.library

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 - 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

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
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

Customise Color Scheme

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

Contributors

mannieschumpert, pepelsbey

Credits

nathos's sass-textmate-bundle

Textmate Language Grammars