67

I'm using Sublime 3 editor. When I open a SCSS file it shows many red characters because it misjudged the syntax. When I press CTRL + Shift + P and type sass or scss I get no option. I had to set syntax to CSS.

Is there any way to set syntax to SCSS in Sublime 3?

1

3 Answers 3

167

press CTRL + Shift + P in Submile Text below popup opens

enter image description here

Click on the Package Control: Install Package.which will open the below popup. Type SCSS in the search box. Look for exactly: SCSS (it may not be the first thing that comes up) and click on it.

enter image description here

again press CTRL + Shift + P and search for SCSS and click on the Set Syntax: SCSS. that it your scss files will be colored accordingly

enter image description here

4
  • 3
    A note: Package Control may noy be installed by default Jun 11, 2018 at 10:41
  • 4
    @user31782 Do you mind accepting this answer so that others can find the solution more easily? Jul 16, 2018 at 17:01
  • 1
    I don't know why but after installing the linter, I cant set the syntax. It's not offered as an option.
    – codenoob
    Dec 23, 2018 at 17:34
  • 1
    @elliottregan I think by the time this answer was posted, I stopped participating on stack exchange network. I don't do programming anymore so it is not possible for me to accept it. Sorry mate.
    – user31782
    May 18, 2019 at 10:54
42

There are two very popular packages: 'Sass', and 'SCSS'. I started with the 'SCSS' package, given that codegeek's 72+ answer suggests it, but I found that a large amount of my valid SCSS was just white.

The 'Sass' package contains both Sass and SCSS, and is much more complete for SCSS than the package just called 'SCSS'.

Steps to install:

  1. CTRL+SHIFT+P (Mac: COMMAND+SHIFT+P)
  2. Type 'Package Control: Install package' and press Enter. Wait several seconds
  3. Type 'Sass', ensure the selected item is just 'Sass', and press Enter.
  4. You'll see installation status in the status bar at the bottom of the app. When finished installing:
  5. CTRL+SHIFT+P again
  6. Type 'Set syntax: SCSS' and press Enter
2
  • 1
    Any tips on syntax specific spaces? for me when pressing enter it still makes 4 spaces even though there should be 2 as per syntax specific file for scss
    – trainoasis
    Sep 25, 2019 at 10:55
  • I confirm that the SASS 2.0 plugin is much better than the SCSS plugin. Feb 9, 2021 at 21:37
2

If you have the Sass extension installed (which supports both SASS and SCSS) and you want all .scss files to open with the newer SCSS syntax highlighting rather than the older SASS, then do the following:

  • Open View -> Syntax -> Open all with current extension as...
  • Select Sass -> SCSS

Credit: http://joncaveman.com/2015/08/11/sublime-text-3-default-syntax-highlighting-for-file-types/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.