stylus
Expressive, robust, feature-rich CSS language built for nodejs
A CSS preprocessor for Node.js that lets you write stylesheets with variables, mixins, loops, and functions, then compiles them to standard CSS that any browser understands.
Stylus is a CSS preprocessor for Node.js. CSS is the language that controls how web pages look, and a preprocessor is a tool that lets you write CSS in a more flexible way and then compile it down to the standard CSS format that browsers understand. Stylus takes your source file and outputs regular CSS.
It supports two writing styles. One uses indentation instead of curly braces and semicolons, which produces a very compact file. The other accepts standard CSS syntax, so existing CSS files are valid Stylus files. Both styles produce identical output.
The feature set is broad. Stylus supports variables (so you can define a color or font size once and reuse it throughout a file), mixins (reusable blocks of CSS rules that can accept arguments), nested selectors, conditionals, loops, and a library of over 60 built-in functions. It also handles vendor-prefixed properties, which are the browser-specific versions of CSS rules (such as -webkit-border-radius alongside border-radius) that older web pages needed. The @extend directive lets one selector inherit the styles of another without duplicating the rules in the output.
Stylus is used from the command line or as a Node.js library. The command-line tool can watch a file for changes and recompile automatically. It integrates with build tools and frameworks including Connect (a Node.js web server middleware layer), Ruby on Rails, Meteor, and Laravel. A JavaScript API is available for programmatic use.
The project was originally written by TJ Holowaychuk and is now maintained under the Automattic copyright. It is released under the MIT license, which allows free use and modification.
Where it fits
- Replace repeated color and font values across a large stylesheet with named variables so global changes take one edit.
- Write reusable button-style mixins with size arguments and apply them consistently across many components.
- Set up a file watcher that recompiles your Stylus source to CSS automatically every time you save a change.
- Integrate Stylus into a Node.js web server or build tool so stylesheets compile on the fly during development.