When it comes to web development, the most common way to style an application is to use CSS. However, CSS can be cumbersome to work with because it is notoriously difficult to debug.
Learn how to use Stylus CSS, and you’ll have another option, with one of the most popular CSS preprocessors available.
What Is a CSS Preprocessor?
CSS preprocessors are utilities that make it easier to write CSS. They often compile code from their own custom syntax to the.cssformat that browsers can understand.
CSS preprocessors like Sass, for example, offer special features like loops, mixins, nested selectors, and if/else statements. These features make it easier to maintain your CSS code, especially in large teams.
To use a CSS processor, you have to install the compiler in your local environment and/or production server. Some frontend build tools, like Vite, let you includeCSS preprocessors like LessCSSin your project.
How Stylus CSS Works
To install Stylus in your local environment, you need Node.js and eitherNode Package Manager (NPM)or Yarn installed on your machine. Run the following terminal command:
Every Stylus CSS file ends in a.stylextension. Once you’ve written your Stylus CSS code, you can compile it with this command:
This should compile all the.stylfiles and output.cssfiles in the current directory. The Stylus compiler also makes it possible to compile.cssfiles into.stylwith the–cssflag. To convert a.cssfile to the.stylformat, use this command:
Syntax and Parent Selectors in Stylus CSS
In traditional CSS, you define a style block with braces; failure to include these characters will lead to broken styles. In Stylus CSS, using braces is optional.
Stylus supports a Python-like syntax, meaning that you’re able to define blocks using indentations instead, like this:
The code block above compiles to the following CSS:
Just like in CSS preprocessors like Less, you can reference a parent selector with the&character:
Which compiles to:
How to Use Variables in Stylus CSS
In CSS preprocessors like Less CSS, you define variables with the@character,while traditional CSS uses “–” to define a variable.
In Stylus, things are a bit different: you do not need a special symbol to define a variable. Instead, just define the variable using an equals sign (=) to bind it to a value:
You can now use the variable in the.stylfile like this:
The code blocks above compile to the following CSS:
You can define a null variable with parentheses. For example:
You can reference other property values using the@symbol. For example, if you want to set a div’s height to be half of its width, you could do the following:
That would work, but you’re able to also avoid creating the variable altogether and reference thewidthproperty value instead:
In this code block, the@symbol allows you to reference the actualwidthproperty on thediv. Regardless of the approach you choose, when you compile the.stylfile, you should get the following CSS:
Functions in Stylus CSS
you’re able to create functions that return values in Stylus CSS. Let’s say you want to set thetext-alignproperty of a div to “center” if thewidthis greater than 400px, or “left” if thewidthis less than 400px. You can create a function that handles this logic.
This code block calls thealignCenterfunction, passing thewidthproperty value by referencing it with the@symbol. ThealignCenterfunction checks if its parameter,n, is greater than 400, and returns “center” if it is. Ifnis less than 200, the function returns “left”.
When the compiler runs, it should produce the following output:
In most programming languages, functions assign parameters based on the order in which you provide them. This can lead to mistakes as a result of passing parameters in the wrong order, which is more likely the more parameters you have to pass.
Stylus provides a solution: named parameters. Use them instead of ordered parameters when you call a function, like this:
When to Use a CSS Preprocessor
CSS preprocessors are very powerful utilities that you’re able to use to streamline your workflow. Choosing the right tool for your project can help improve your productivity. If your project needs just a tiny amount of CSS, then using a CSS preprocessor might be overkill.
If you are building a large project, perhaps as part of a team, that relies on a huge amount of CSS, consider using a preprocessor. They offer features like functions, loops, and mixins that make it easier to style complex projects.
