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

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm and tagged , , , . Bookmark the permalink.

9 Responses to Syntactically Awesome Stylesheets

  1. raveren says:

    Am I getting this right, you release a ruby tool for a php IDE? :)

  2. It’s more relevant for WebStorm as a tool for web-masters :) But it’s also included in PhpStorm.

  3. Elte Hupkes says:

    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 :).

  4. @Elte Hupkes
    Thank you :)
    Would you mind, please, file a bug in our tracker:
    http://youtrack.jetbrains.net/issues/WI
    then you will be notified as soon as it will be fixed :)

  5. Richard says:

    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

  6. Benxamin says:

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

  7. David MacLean says:

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

    EG
    $page-color: #FF0000

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

    {
    color:#FF0000
    }

    …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!

  8. Søren says:

    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 :)

Comments are closed.