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

About this post →

One comment →

Leave a comment →




Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks: 

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>