Stylus is a quite new but a dynamically developing CSS preprocessor. If we have a look at the CSS preprocessors usage statistics (for example, http://css-tricks.com/poll-results-popularity-of-css-preprocessors or http://blog.codepen.io/2013/04/08/statistics-on-preprocessor-usage), 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’.
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:
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n form
input[type=button]
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 http://learnboost.github.io/stylus.
If you are interested in a more detailed comparison of preprocessors, please, have a look at this table http://csspre.com/compare.
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 http://nodejs.org
To install Stylus on your platform, please, check that you already have node.js and a package manager npm https://www.npmjs.com. Then just enter this command
npm install stylus -g2. 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 https://github.com/AustP/Stylus.php.
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 https://www.drupal.org/project/stylus. 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.
