stylus/stylus

★ 11,322JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Stylus))
    What it does
      CSS preprocessing
      Compiles to CSS
    Features
      Variables
      Mixins
      Loops
      Functions
    Tech stack
      Node.js
      JavaScript
    Use cases
      Web styling
      Design systems
      Build pipelines

mindmap root((Stylus)) What it does CSS preprocessing Compiles to CSS Features Variables Mixins Loops Functions Tech stack Node.js JavaScript Use cases Web styling Design systems Build pipelines

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace repeated color and font values across a large stylesheet with named variables so global changes take one edit.

USE CASE 2

Write reusable button-style mixins with size arguments and apply them consistently across many components.

USE CASE 3

Set up a file watcher that recompiles your Stylus source to CSS automatically every time you save a change.

USE CASE 4

Integrate Stylus into a Node.js web server or build tool so stylesheets compile on the fly during development.

Tech stack

JavaScriptNode.jsCSS

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to define a $primary-color variable in Stylus and use it inside a mixin that generates button styles in three sizes.

Prompt 2

How do I configure Stylus to watch a source directory for changes and automatically recompile to an output folder?

Prompt 3

Convert this plain CSS file to Stylus indentation syntax and extract all repeated hex color values into named variables.

Prompt 4

How does Stylus's @extend directive work? Show me an example where a .btn-primary selector inherits base styles from .btn without duplicating CSS rules in the output.

Open on GitHub → Explain another repo

← stylus on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.