Stylus in WebStorm 7

Stylus is relatively new, yet feature-rich CSS language. WebStorm 7 there now includes initial support for Stylus in addition to other CSS preprocessors, LESS and Sass.

See it in action in our video (also featuring Emmet):

In Stylus code you can drop braces, semi-colons and even colons.
One of the advantages of Stylus is its flexibility that in some cases outdoes Sass.
Another interesting feature of the language is transparent mixins: any mixin can be treated as a CSS property. Here is a simple example: (But with transparent mixins you can use Stylus to redefine existing CSS properties. Padding to margin – why not? :) ).

What support does WebStorm provide for Stylus?

First of all, there is coding assistance for Stylus:

  • syntax highlighting
  • auto-completion
  • and code formatting

Second, WebStorm has a predefined Stylus File watcher that handles all compilation to CSS automatically when you make changes in your Stylus code.

Give it a try in WebStorm 7!
Stylus is also available out-of-the-box or as a plugin in IDEA, PhpStorm, RubyMine and PyCharm.

Develop with pleasure!
WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature. Bookmark the permalink.

Leave a Reply

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