Syntactically Awesome Stylesheets

Not long ago we posted about Leaner CSS support in upcoming WebStorm 2.0 & PhpStorm 2.0.

Starting from version 2.0 we also support another alternative to CSS – SASS and its newest version SCSS.

For now SASS support includes:

  • Syntax highlighting
  • Smart code folding based on indentation
  • Comment/uncomment actions
  • Dedicated colors page to customize default highlighting attributes
  • Smart color-editor with gutters (see screenshot)

Note: Compilation of SASS is not supported via IDE, but it’s easily achieved via stand-alone compiler.

Here you can see SASS editor with smart code folding based on indentation.

The syntax highlighting attributes can be configured in File | Settings | Editor | Colors & Fonts | SASS.

You can also see color boxes on the gutters โ€” these are exactly the colors used within your SASS file.
You can modify them either by editing plain SASS code or using our Color Edtorย โ€” just click the corresponding gutter!

Release candidates of WebStorm & PhpStorm, as well as new versions of other JetBrains IDEs such as RubyMine for Ruby and PyCharm for Python already have this feature available.

Develop with SASS! Develop with pleasure!
– JetBrains Web IDE Team

Comments below can no longer be edited.

9 Responses to Syntactically Awesome Stylesheets

  1. Avatar

    raveren says:

    February 11, 2011

    Am I getting this right, you release a ruby tool for a php IDE? ๐Ÿ™‚

  2. Avatar

    Alexey Korsun says:

    February 11, 2011

    It’s more relevant for WebStorm as a tool for web-masters ๐Ÿ™‚ But it’s also included in PhpStorm.

  3. Avatar

    Sam Dark says:

    February 11, 2011

    There are parsers for PHP: http://code.google.com/p/phamlp/

  4. Avatar

    Elte Hupkes says:

    February 14, 2011

    Great tool! Auto indentation for .scss files (so CSS syntax) is currently far from convenient though, for example typing “a { [enter]” leaves you with the cursor not indented between the inserted curly braces, but on the bottom line right before the last brace, so you have to manually move back up and indent. If it would just auto indent the exact way CSS files do it would be perfect!

    Also, using the SASS-watch tool from inside the IDE would be great, but firing it up once per work session isn’t that big a deal I suppose :).

  5. Avatar

    Alexey Korsun says:

    February 14, 2011

    @Elte Hupkes
    Thank you ๐Ÿ™‚
    Would you mind, please, file a bug in our tracker:
    then you will be notified as soon as it will be fixed ๐Ÿ™‚

  6. Avatar

    Richard says:

    April 28, 2011

    Very useful feature!
    I have written a short blog post on how to integrate the sass tool from within the IDE using the “external tools” functionality.
    You can find it here: http://bit.ly/jt610b

  7. Avatar

    Benxamin says:

    July 5, 2011

    EXCELLENT! I can’t wait for SASS compilation!
    Although I rather enjoy a sasswatch running in the background (http://i.imgur.com/mrN3y.png).

  8. Avatar

    David MacLean says:

    July 7, 2011

    But does not give us a color square to click on for my definitions?!

    $page-color: #FF0000

    If I want to see/use/play with that color, II have to change it to:


    …and that seems to give phpStorm enough clues to put the color block in the margin.

    Is there more I need to know, or does SASS support NOT include a color box in the gutter for variables?

    PS: I’d also appreciate it if the RGB tab of the “select color” dialog had a HEX option!

  9. Avatar

    Sรธren says:

    August 5, 2011

    SASS syntax highlighting works like a charm, however, the structure panel doesn’t. Is it possible to use it with .scss files at all? Having that panel open comes in handy with longer CSS files, would be great to have it work for SCSS as well!

    Cheers ๐Ÿ™‚