What is this?
Stylus is a CSS preprocessor language for Node.js that lets you write stylesheets with an expressive, dynamic syntax (indented or regular CSS-style) and compiles them down to plain CSS.
Stylus is a CSS preprocessor language for Node.js that lets you write stylesheets with an expressive, dynamic syntax (indented or regular CSS-style) and compiles them down to plain CSS.Is it a CLI tool or a library I import into my build?Both: Stylus ships as a Node.js library you can require in your build pipeline and as a command-line tool for watching and compiling .styl files directly.
Both: Stylus ships as a Node.js library you can require in your build pipeline and as a command-line tool for watching and compiling .styl files directly.How do I add it to a project?Install it via npm and either require it in your Node code or run it from the command line to watch and compile a .styl file into CSS.
Install it via npm and either require it in your Node code or run it from the command line to watch and compile a .styl file into CSS.Do I need anything special installed first?Just Node.js (version 16 or newer) and npm; Stylus itself depends on small libraries like glob, sax, and source-map internally.
Just Node.js (version 16 or newer) and npm; Stylus itself depends on small libraries like glob, sax, and source-map internally.Can I try it without installing anything?Yes, Stylus has an online playground at stylus-lang.com and can also be tried on CodePen or RunKit without a local setup.
Yes, Stylus has an online playground at stylus-lang.com and can also be tried on CodePen or RunKit without a local setup.How is Stylus different from writing plain CSS?Stylus adds variables, mixins, functions, and an optional indentation-based syntax (no braces or semicolons required), making stylesheets more dynamic and less repetitive than plain CSS.
Stylus adds variables, mixins, functions, and an optional indentation-based syntax (no braces or semicolons required), making stylesheets more dynamic and less repetitive than plain CSS.Is there a cheatsheet for the syntax?Yes, the README links to a community-maintained Stylus cheatsheet with handy syntax snippets.
Yes, the README links to a community-maintained Stylus cheatsheet with handy syntax snippets.Can I extend Stylus with third-party modules?Yes, the README points to a list of community modules that extend Stylus functionality beyond the core.
Yes, the README points to a list of community modules that extend Stylus functionality beyond the core.What are similar projects?browserslist, less.js, autoprefixer, linaria, emotion, twinkleplop, markdown-it, rolldown
browserslist, less.js, autoprefixer, linaria, emotion, twinkleplop, markdown-it, rolldownWhich topics is it in?markup, styling, build-tool, css, web-development, command-line-tool, npm, frontend, nodejs, library, javascript, cli
markup, styling, build-tool, css, web-development, command-line-tool, npm, frontend, nodejs, library, javascript, cli