Sublime - SASS Syntax

Any files can be modified in Sublime Text Editor.

Consider that you are working Frontend application that uses SASS and SCSS styles.

Does it support SASS or SCSS files for syntax checking and nice colors? No, there is no support natively in Sublime text editor. However, You can install via package install.

For example, If you open a sass or scss file, There are no syntax colors and uses the default white or theme color as shown below

Sublime provides sass or scss packages.

I tried both packages, It seems SASS is a more mature package than SCSS.

Let’s install the SASS package.

SASS is a custom package that provides edits and modifies operations for a developer with the below basic features.

• syntax Highlight colors for SASS or SCSS files
• Autocomplete for SASS functions and variables
• Key Bindings for shortcut commands

How to set SASS or SCSS syntax colors in Sublime Text

Following are the steps required to install and set Syntax to SASS or SCSS.

Let’s install the SASS Package.

• Go to, Tools Menu + Command palette or use the following shortcut commands

  • Windows: hotkeys: Ctrl + Shift + P
  • Mac: shortcuts: ⌘ + Shift +P

• It opens the command palette types install in the search box and selects the Package Control: Install Package option as shown below

• Next, It opens the Command Palette, type sass in the search box, and select the Sass option as shown below

• It installs the SASS package, and the success message is shown in the bottom left status bar.

• you can also check how to install packages to Sublime text .

• Once SASS is installed, Select Command palette with the below options

  - with UI  `Tools` Menu + `Command palette`
  - Use the following shortcut commands
      - Windows: hotkeys: Ctrl + Shift + P
      - Mac: shortcuts: ⌘  + Shift +P
  

• After opening Command Palette, type scss in the search box and select the Set Syntax: SCSS option as shown below


• Now, You see the syntax highlight for SASS colors and properties and variables as given below.