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

  • 2014.08.12.11.09.22
  • github.​com
  • github.​com
  • 11 months ago
  • 29 minutes ago
  • 2 years ago

Installs

  • Total 52K
  • Win 18K
  • OS X 28K
  • Linux 7K
Jul 4 Jul 3 Jul 2 Jul 1 Jun 30 Jun 29 Jun 28 Jun 27 Jun 26 Jun 25 Jun 24 Jun 23 Jun 22 Jun 21 Jun 20 Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20
Windows 16 30 38 44 42 48 27 24 34 39 38 42 28 12 24 42 44 47 47 33 24 21 29 35 37 46 31 26 25 44 39 59 47 37 24 32 44 40 39 45 36 22 26 33 45 30
OS X 17 33 75 65 65 71 32 29 54 38 65 45 69 33 27 55 66 67 58 66 21 35 48 67 49 66 55 28 31 49 69 74 72 71 31 31 44 55 77 68 43 27 25 51 52 63
Linux 2 4 10 7 12 17 1 12 10 8 15 18 19 3 10 15 9 19 12 14 11 7 11 11 14 11 4 7 4 11 20 17 15 16 6 12 16 16 13 7 6 5 10 10 11 9

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