SCSS syntax highlighting for Notepad++

We recently started to use SASS / SCSS to code our stylesheets. We were missing some proper syntax highlighting with the default CSS settings provided by Notepad++. After some research, we found a good base on Wouter Beugelsdijk’s techblog but we were still not quite happy with it.

How to use

To enable SCSS syntax highlighting:

  • In Notepad++, pick the User Defined Dialog... item from the view menu.
  • Click on the import button and simply select the XML file located in our ZIP file
  • That’s it, all your files with the .scss extension should now be highlighted

To enable autocomplete:

  • go to your Notepad++ folder then to /plugins/APIs/
  • duplicate the css.xml and rename this file to scss.xml.

Our modifications

version 1.0

  • Highlighting for HTML tags
  • Changed some colors
  • Added syntax coloring for important comments starting with /! instead of just /
  • Added syntax coloring for partial css keywords used while using nested properties

Download

We have made the file available on our GitHub account. You can get it from the notepad-plus-plus-scss-syntax-highlighting repository

5 comments

  1. This works with Notepad++ 6.4.2. At first I was getting a failed to import error. Then I looked at the XML file I had downloaded and realized it wasn’t XML. I am not that familiar with GitHub, so when I had right clicked on the XML file listed there and selected save as in Firefox it saved some sort of html file. Not the xml code. So instead I click on it so it showed all the xml code, copied and created my own XML file. I probably did that the long way, but I couldn’t figure out how to download it properly. Probably a dumb newbie thing that I will figure out soon enough. Hopefully this helps another newbie like me.

Comments are closed.