Guide · Open source
How to use Stylus: set up and compile CSS preprocessor styles
Updated · written with AI from the project's own documentation and checked against our catalogue data
Stylus is an open-source CSS preprocessor written in JavaScript for Node.js. You write styles in its own compact language, and it compiles them into regular CSS that browsers can read. This guide explains what it is, what you need before starting, how to get the project, and when it makes sense to use it. The README we based this on was truncated, so the steps below stick to what it confirms and point you to the project homepage for the rest.
Stylusstylus/stylus · ★ 11.3k · MIT Install options & downloads Quick start
- 1Check Node.js. Make sure Node.js is installed, since Stylus is built for Node.js.
- 2Get the source. Run git clone https://github.com/stylus/stylus to download the repository.
- 3Read the docs. Open the project homepage at stylus-lang.com and the README for setup and usage details.
- 4Write Stylus files. Write your styles in Stylus's compact, indentation-based syntax.
- 5Compile to CSS. Run the Stylus compiler as part of your Node.js build so the output is regular CSS.
- 6Check the output. Load the compiled CSS in your browser and confirm the styles apply as expected.
What is Stylus and what does it do?
Stylus is a CSS preprocessor. Instead of writing plain CSS directly, you write stylesheets in Stylus's own syntax. A build step then turns those files into standard CSS that browsers load.
The project describes itself as expressive, robust and feature-rich, and it is aimed at people who want more flexible styling code than plain CSS offers.
- Written in JavaScript and built for Node.js
- Compiles its own language into regular CSS
- Uses a terse, indentation-based syntax
- Licensed under the MIT licence
What do you need before you start?
Stylus is built for Node.js, so Node.js is the main prerequisite. It suits people who already build front-end projects and want a CSS preprocessor as part of that build.
If you only need standard CSS and have no build step, Stylus adds a tool you would have to run to produce the CSS, so it is probably unnecessary for you.
- Node.js installed on your machine
- A front-end project that has, or will have, a build step
- Basic familiarity with CSS, since Stylus compiles to CSS
How do you get the Stylus source code?
The README we reviewed gives a clone command for the repository. Run it in the directory where you want the project to live. The project homepage at stylus-lang.com is the place to look for the rest of the documentation.
- Clone the repository from GitHub using the command below
- Open the project folder and read the README and docs for setup details
git clone https://github.com/stylus/stylusHow do you write and compile a Stylus file?
The README we reviewed does not include example syntax or compile commands, so this guide does not show them. The general workflow is to write your styles in Stylus files, then run the Stylus compiler as a step in your Node.js build so the output is plain CSS for the browser.
Check the project homepage at stylus-lang.com for the current syntax reference and usage instructions before you wire it into a build.
- Write styles in Stylus files using its indentation-based syntax
- Compile them to CSS as part of your Node.js build step
- Serve the compiled CSS to browsers
How does Stylus compare with Sass, Less and PostCSS?
Sass, Less and PostCSS are the most commonly compared tools. All of them help you produce CSS from richer source code, but they differ in syntax and in how they fit into a build.
Stylus is a good fit if you want a terse, indentation-based syntax inside a Node.js workflow. If you need a preprocessor with a large ecosystem of tooling, check that ecosystem yourself, because the README we reviewed does not describe it.
- Sass, Less and PostCSS are the closest alternatives
- Choose on syntax preference, build setup and the tooling you need
- Verify tooling support directly in each project
What people use it for
- Compiling stylesheets as part of a Node.js front-end build step
- Writing terse, indentation-based styles in a front-end project
- Trying a CSS preprocessor as an alternative to Sass, Less or PostCSS
Frequently asked questions
Is Stylus free to use?
Yes. The repository is licensed under the MIT licence, which is a permissive open-source licence. Check the LICENSE file in the repository for the full terms.
What do I need to run Stylus?
The project lists Node.js as the prerequisite. Stylus is written in JavaScript and built for Node.js, so you need Node.js installed before you use it.
How do I install Stylus?
The README we reviewed gives a git clone command for the repository. For other install options, check the project homepage at stylus-lang.com and the README, since they were not included in the source we used.
Is Stylus the same as CSS?
No. Stylus is a CSS preprocessor. You write in Stylus's own syntax and it compiles that into regular CSS that browsers can read.
What are the alternatives to Stylus?
Sass, Less and PostCSS are the comparable projects named for Stylus. Each takes a different approach to writing and compiling styles, so compare their syntax and build integration before choosing.
Do I need Stylus if I only write plain CSS?
Probably not. Stylus outputs CSS, but it still requires a compile step. If you only need standard CSS with no build step, Stylus adds work without a clear benefit.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Stylus suits Node.js developers and front-end teams who already run a build step and prefer a terse, indentation-based syntax. If you only need plain CSS, or you need a preprocessor with a large, well-documented tooling ecosystem, look at Sass, Less or PostCSS first, since the README we reviewed does not confirm that ecosystem.
Install options & downloads