Tips & Tricks

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

image description