Did you know that the first CSS preprocessor was introduced over a decade ago, changing the way we write stylesheets? A CSS Preprocessor extends the limited capabilities of CSS and helps in improving efficiency, maintainability, organization, and reusability. 

The tool in focus today is a very popular CSS preprocessor tool - Stylus. Stylus takes your CSS to the next level. With features like variables, nesting, and mixins, Stylus transforms the repetitive, cumbersome aspects of writing CSS into a streamlined, efficient process. It offers a dynamic approach to styling that will enhance your productivity and keep your code organized. Stylus can be integrated with your Drupal theme as well, and we'll discuss how to do that shortly. We’ll also talk about what makes Stylus more flexible than SCSS (Sassy CSS or Syntactically Awesome Stylesheet).

What is Stylus CSS Preprocessor

Stylus is a CSS preprocessor, which allows you to write CSS in a more dynamic way. It was initially released in 2010 as an open-source project. Stylus gained attention for its minimalist syntax as it is clean, without semicolons and brackets. The latest version is v0.63.0. Compared with SASS, it's newer as the first SASS release made its way to the market in 2006.

Why Stylus over SCSS

Stylus has a more minimalist syntax compared to SCSS. It allows you to omit brackets and colons and relies on indentation instead of braces and semicolons.

Installing Stylus CSS Preprocessor

To install Stylus on a local machine, ensure you have Node.js and npm installed, then run the following command:

npm install stylus –g

Compile Stylus files to CSS files:

stylus stylus/index.styl -o css/

Add the Stylus Watcher:

stylus -w stylus/index.styl -o css/

Installation in Drupal Theme

It's simple and easy to use Stylus in any CSS-based Drupal theme. First, install Stylus on your local machine using the command provided above. After successful installation, create a folder named ‘stylus’ to hold all files with the .styl extension. There should also be a CSS folder to contain the compiled CSS files. Once both folders and files are ready, run the following command:

stylus -w stylus/index.styl -o css/

In the case of Stylus, we don’t need to configure any JS file like we do when using a GULP CSS preprocessor.

How Stylus is more flexible than SCSS

  • Indentation-based, Less Syntax, More Flexibility: Stylus is indentation-based. Whitespaces are significant, so we substitute the curly braces ({...}) with an indent, which allows us to omit semicolons, braces, and colons as shown in the following code snippet.

Example:
 body
 color white

  • Built-in Functions: Stylus comes with a rich set of built-in functions for tasks like color manipulation, mathematical operations, and more.

   • unit(value, units) - Which converts the specified value to the specified units eg unit(10px, em)
   • to-em(value) - Converts the specified value from pixels to em units.
   • to-px(value) - Converts the specified value from em units to pixels.

  • Integrated Units: Stylus supports integrated units, which means you can perform calculations with mixed units (e.g., 2px + 1em) without converting them manually. This can be convenient for responsive design and other scenarios where you need to work with different units in your stylesheets.

Example:
 body   
 width 100px + 1em

  • Using CSS properties as variable lookup: CSS Property values can be used in the same selector.

Example:
 H1 
 max-width: 100px
 width: (@max-width/2)

  • Variables Scopes in Stylus: There are two types of variables you can define in Stylus: Local and Global. Variables declared within a block are local or block-scope variables. Global variables take precedence over local variables.

Example: 
 primary-color = "green“
 h1
 primary-color = “red“
 color primary-color
 h2
 color primary-color 
 
OUTPUT CSS: 
 h1 { color: red; }
 h2 { color: green }

  • Variables in Stylus: Variables in Stylus are like normal identifier names; they can contain $. Therefore, the following variables are valid with or without $.

 header1-font = 25px
 header2-font = 20px
 $header3-font = 20px
 
 Stylus Mixins & it’s implémentation
 buttonmixin {
 border-radius: 25px;
 color: white;
 }
 button
 buttonMixin

  • for Loop iteration: For loop iteration in Stylus allows us to harness basic programming features. Here's how we implement a for loop in Stylus:

 size-1 = 30px
 size-2 = 24px
 size-3 = 20px
 for i in 1..3
 h{i}
   font-size: lookup('size-' + i)
 
 The Output:
 
 h1 {font-size: 30px;}
 h2 {font-size: 24px;} 
 h3 {font-size: 20px;}

  • Stylus Functions: Functions are similar to mixins however functions return data mixins don’t. In Stylus we can declare and call functions like in any other programming language.

widthCalculate(width1,padding1) 
 width1+padding1
 
 div
width:widthCalculate(100px,10)
Func with Default Argument 
 widthCalculate(width1,padding1 = 20) 
 width1+padding1

If you would like to learn more about Stylus, check their documentation page here.

Final Thoughts

So there you have it—Stylus brings a breath of fresh air to your Drupal projects when it comes to managing CSS. Using Stylus enables you to style effortlessly with variables, nesting, and mixins. Are you revamping an existing theme or starting fresh? Our Drupal experts are here to bring your vision to life. Let's transform your website together. Explore our Drupal development services today and see how we can tailor Stylus to fit your project perfectly.

Contact us

LET'S DISCUSS YOUR IDEAS. 
WE'D LOVE TO HEAR FROM YOU.

CONTACT US SUBMIT RFP