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.
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 –gCompile 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 divwidth: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.
