Stylus (stylesheet language)

Stylus (stylesheet language)
Name	Stylus
Paradigm	Stylesheet preprocessor
Developer	VisionMedia
Influenced by	Sass, Less, Haml
Stable release	0.54.8
License	MIT

Stylus (stylesheet language) is a dynamic stylesheet preprocessor that extends CSS with variables, mixins, nesting, and programmatic features. It originated in the JavaScript ecosystem and is commonly used alongside Node.js, npm, and Webpack to streamline styling workflows for web applications. Stylus aims to reduce boilerplate from authors influenced by Sass (stylesheet language), Less (stylesheet language), and template languages such as Haml.

Overview

Stylus was created by contributors associated with VisionMedia and adopted in projects using Express (web framework), Koa (web framework), and Electron (software framework). It emphasizes concise syntax options influenced by Python-style indentation and the terseness of Ruby (programming language) communities around Sass (stylesheet language). The project provides a runtime that compiles Stylus files into standards-compliant CSS for browsers including Chrome, Firefox, Safari, and Edge via build tools like Gulp (software), Grunt (software), and Parcel (software).

Syntax and Features

Stylus supports variables, mixins, functions, and control directives similar to those used in Sass (stylesheet language), Less (stylesheet language), and PostCSS. Its optional semicolon and brace omission draws parallels with Haml and languages such as CoffeeScript. Stylus allows nested rules resembling nesting in Sass (stylesheet language), supports interpolation used in Ruby (programming language) templating, and includes built-in functions for color manipulation akin to functions in Sass (stylesheet language), PostCSS, and LESS. The language exposes a plugin system that has integrations with libraries developed by maintainers from Automattic, Google, and community projects hosted on GitHub. Stylus also offers runtime mixins that can be used with frameworks like React (JavaScript library), Vue.js, and Angular (application platform) through loader integrations.

Tooling and Integration

Stylus integrates with package managers and toolchains such as npm, Yarn, and pnpm and with bundlers including Webpack, Rollup (software), and Parcel (software). Official and community tooling provide loader packages for Webpack and middleware for Express (web framework) and Koa (web framework). Continuous integration workflows in systems like Jenkins, GitLab CI/CD, and GitHub Actions commonly include Stylus compilation steps alongside linters such as ESLint and style tools like Stylelint. IDE support extends through extensions for Visual Studio Code, Sublime Text, and JetBrains products, with syntax highlighting and snippets contributed on GitHub and distributed via npm packages.

Comparison with Other Preprocessors

Stylus is often compared to Sass (stylesheet language), Less (stylesheet language), and PostCSS. Compared to Sass (stylesheet language), Stylus provides more permissive syntax options (optional colons and semicolons) and a different macro model; Sass (stylesheet language) emphasizes a stricter SCSS syntax maintained by teams at Google and other contributors. Against Less (stylesheet language), Stylus offers richer programmatic abstractions and built-in functions similar to plugins in PostCSS. When contrasted with PostCSS, Stylus is a full preprocessor language rather than a plugin-based processor; PostCSS has strong adoption in projects led by contributors from Mozilla and design systems used at Airbnb (company) and GitHub. Stylus’s niche has historically been projects in the Node.js ecosystem that prefer syntactic terseness like that found in CoffeeScript-oriented stacks.

Adoption and Use Cases

Stylus has been used in open-source projects hosted on GitHub and in companies that adopted lightweight build chains around Node.js and Express (web framework). It has appeared in themes and tooling for content management systems such as Ghost (software) and in desktop applications built with Electron (software framework). Front-end projects using React (JavaScript library), Vue.js, and server-rendered stacks with Express (web framework) have leveraged Stylus for modular styles, design tokens, and rapid prototyping. Community packages and starter kits in organizations like IBM and independent developers distribute Stylus starter templates via npm and GitHub repositories.

Criticisms and Limitations

Critics point to Stylus’s permissive syntax and flexible features as sources of inconsistent code style in teams using tools from Airbnb (company)-style style guides or corporate standards enforced by ESLint-centric pipelines. The ecosystem around Stylus is smaller than that for Sass (stylesheet language) and PostCSS, with fewer maintained plugins from organizations like Google or Mozilla. Some enterprises prefer the stability and governance models used by standards-aligned tools in projects affiliated with W3C discussions or vendor initiatives from Microsoft and Google, reducing Stylus adoption in large-scale design systems. Additionally, migration tooling from Stylus to Sass (stylesheet language) or PostCSS-based setups can require manual refactoring for idiosyncratic mixins and interpolation patterns.

Category:Stylesheet languages