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
  • 12 months ago
  • 1 hour ago
  • 2 years ago

Installs

  • Total 54K
  • Win 19K
  • OS X 29K
  • Linux 7K
Aug 1 Jul 31 Jul 30 Jul 29 Jul 28 Jul 27 Jul 26 Jul 25 Jul 24 Jul 23 Jul 22 Jul 21 Jul 20 Jul 19 Jul 18 Jul 17 Jul 16 Jul 15 Jul 14 Jul 13 Jul 12 Jul 11 Jul 10 Jul 9 Jul 8 Jul 7 Jul 6 Jul 5 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
Windows 15 52 53 63 60 54 36 29 48 71 29 43 66 28 26 38 38 44 43 42 17 18 32 38 38 41 46 22 25 30 38 44 42 48 27 24 34 39 38 42 28 12 24 42 44 47
OS X 13 45 67 59 48 59 21 25 34 52 65 62 51 26 25 47 59 63 61 85 18 18 66 48 59 61 49 27 28 33 75 65 65 71 32 29 54 38 65 45 69 33 27 55 66 67
Linux 3 16 17 14 15 10 8 12 11 12 11 9 19 3 7 10 10 6 10 17 4 4 12 9 14 5 14 6 5 4 10 7 12 17 1 12 10 8 15 18 19 3 10 15 9 19

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