Stylus Guide

Stylus is a powerful CSS preprocessor that enables you to write efficient, maintainable, and beautiful stylesheets. In this guide, we'll cover the basics of Stylus and how it can help you streamline your CSS workflow.

Features of Stylus

Nested Rules: Write CSS in a more intuitive, nested structure.
Mixins: Reusable blocks of code that can be mixed into your stylesheets.
Functions: Custom functions for calculations and transformations.
Extends: Inherit styles from other selectors.
Interpolations: Embed expressions within CSS values.

Getting Started

To get started with Stylus, you'll need to install it globally on your system. You can do this using npm:

npm install -g stylus

Once installed, you can compile your Stylus files to CSS using the following command:

stylus input.styl -o output.css

Example

Here's a simple example of how Stylus can make your CSS more concise:

/* input.styl */
body
  font: 16px/1.5 Arial, sans-serif
  color: #333

a
  color: #0066cc
  text-decoration: none

a:hover
  text-decoration: underline

/* output.css */
body {
  font: 16px/1.5 Arial, sans-serif;
  color: #333;
}
a {
  color: #0066cc;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Resources

For more information on Stylus, check out the following resources: