Early Access Program

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

image description