Stylus

Description #

Stylus is a dynamic CSS preprocessor that offers an expressive, flexible syntax for writing stylesheets with features like variables, mixins, nesting, and arithmetic operations.

History #

Stylus was created by TJ Holowaychuk in 2010 to provide a powerful alternative to Sass and Less, with an emphasis on minimalist, optional syntax and JavaScript-style flexibility.

Hello World Code #

color = hotpink

h1
  color: color

How to Run #

Option 1: Online
Try Stylus in the Stylus playground:
https://stylus-lang.com/try.html

Option 2: Local
Install via npm:

npm install -g stylus

Then compile:

stylus hello.styl

Key Concepts #

• Optional syntax (colons, braces, and semicolons are not required)
• Variables with plain assignment (=)
• Mixins and functions
• Supports both indented and traditional CSS syntax
• Arithmetic and logic operations
• Powerful built-in functions
• Imports and reusable partials
• Converts to standard CSS
• Extensible with plugins
• Useful in Node.js and Express apps

Try It Online #

https://stylus-lang.com/try.html

Fun Facts #

• Stylus allows writing styles in as little as one character per rule (with extreme shorthand).
• Known for its flexibility: you can write CSS-like or Python-like syntax interchangeably.
• It was once the default preprocessor for frameworks like Koa and Express view engines.

Resources #

Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources