Stylus CSS Preprocessor

No time to read it now?

We will send a link to the article to your inbox

Read later

Stylus is a quite new but a dynamically developing CSS preprocessor. If we have a look at the CSS preprocessors usage statistics (for example, or, we can see that developers generally prefer to use LESS and SASS preprocessors that approved themselves a long time ago. Of course, we understand that the statistics can’t exactly reflect developers’ preferences. But, nowadays, the tendency shows that these two preprocessors have the lion’s share of the market. Well, that makes it far more interesting to see what Stylus can show against the ‘old-timers’.

Stylus CSS Preprocessor

Current features

All basic features of preprocessors are supported by Stylus. Let’s have a quick look at them:

  • Using variables
  • Mixins
  • Functions
  • Arithmetic operations
  • Importing style files
  • Nested selectors
  • Cycles and conditions
  • Comments
  • Parent references.

Now let’s take a look at some differences:

  • Developers can skip using colons, semicolons, commas and braces, and format styles only by white spaces. Python programmers must appreciate it more than others. Thanks to this option the file size can be reduced. But if you can’t avoid them, Stylus does allow using them similar to a regular CSS.
  • Transparent mixins is a possibility to invoke functions like a regular CSS property. This functionality is very useful for supporting browser prefixes. For example:
  -webkit-border-radius n 
  -moz-border-radius n 
  border-radius n form 

  border-radius: 5px
  • Stylus is written in JavaScript and it has got the JavaScript API that allows developers to expand its functionality and to fix the bugs.

Stylus has got a lot of useful features that we can't describe here. Please follow this link after reading this article

If you are interested in a more detailed comparison of preprocessors, please, have a look at this table

Drupal & Stylus

Finally, you’ve decided that Stylus is what you need and you would like to try using it in your Drupal projects. There are 3 following ways to choose from:

1. Using Node.js

To install Stylus on your platform, please, check that you already have node.js and a package manager npm Then just enter this command

npm install stylus -g

2. PHP libraries

By using PHP libraries you do not need to install any third-party applications. PHP can translate Stylus files into normal CSS files by itself. Please have a look at this library

But you shouldn’t forget that the usage of such libraries has some limitations. First, you may notice that some of the Stylus features are not supported. If we read a documentation of the AustP/Stylus.php library, we will find out that it supports the following features:

  • Omit braces
  • Omit colons
  • Omit semi-colons
  • Custom functions
  • Importing other files
  • '&' parent reference
  • Mixins
  • Interpolation
  • Variables

Second, the Stylus is actively developing and we can’t say how long it takes to add new functionalities to PHP libraries.

3. Online services

One of these services is a simple node.js web service for compiling Stylus cascading stylesheets. If you like using such services, it can save your PC from installing third-party applications and style transformations. But in this case, we will need to spend extra time on uploading and downloading files.

Please, take a look at the Drupal Stylus module At this moment, it supports translating only via AustP/Stylus.php library. But developers aim at giving users an ability to choose what they want to use.

You might also like


What React is and how it can cut the cost of website development

For years React.js has been one of the most popular and efficient tools used for complex web interfaces development. In this post, we are going to tell you – briefly and almost without using any intricate concepts – about React, the way it appeared and the benefits it offers for a business and contractor’s team.