Any files can be modified in Sublime Text Editor.

Consider, 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 sass or scss file, There is no syntax colors and uses default white or theme color as shown below

Sublime text sass without syntax hightlight Sublime provides sass or scss packages.

I tried with 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 edit 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 short cut 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 and type install in the search box and select Package Control: Install Package option as shown below

Sublime text install custom package

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

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

![Sublime text sass scss syntax configuration](/images/editors/sublime/ scss-syntax-set.png)

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

![Sublime text sass scss syntax hightlight working](/images/editors/sublime/ scss-syntax-show.png)