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 43K
  • Win 14K
  • OS X 23K
  • Linux 5K
Mar 4 Mar 3 Mar 2 Mar 1 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6 Feb 5 Feb 4 Feb 3 Feb 2 Feb 1 Jan 31 Jan 30 Jan 29 Jan 28 Jan 27 Jan 26 Jan 25 Jan 24 Jan 23 Jan 22 Jan 21 Jan 20 Jan 19 Jan 18
Windows 3 32 48 30 29 42 27 34 39 41 19 22 35 38 40 42 37 21 31 31 29 37 43 68 19 15 35 50 38 42 45 13 29 39 33 47 44 54 18 16 35 44 38 43 45 13
OS X 6 64 57 43 34 54 48 61 74 64 28 26 38 53 63 59 53 34 25 39 60 77 61 58 21 36 67 48 70 56 73 32 24 49 55 59 48 43 26 30 47 58 72 57 48 28
Linux 0 12 9 8 10 10 9 12 9 8 10 5 16 8 16 9 11 9 8 10 13 18 9 12 9 14 10 13 13 11 9 4 9 8 13 14 9 13 9 9 16 16 9 13 15 10

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