March 3, 2015

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 preprocessorss 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 -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 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.

Was this article helpful? Click to rate: 
Average: 5 (3 votes)

You may also like

Theming is a thing no project can be done without. Though it is not...
1. Introduction It's a very good and important thing to care about...
1. Categorizing CSS Each project requires a certain organization....