Stylus (stylesheet language)

Stylus (stylesheet language)
Name	Stylus
Paradigm	CSS preprocessor, Dynamic programming language
Designer	TJ Holowaychuk
Released	0 2010
Typing	Dynamic typing
Influenced by	Sass, LESS
Operating system	Cross-platform
License	MIT License

Stylus (stylesheet language). Stylus is a dynamic stylesheet language designed as a CSS preprocessor for the Node.js runtime environment. Created by developer TJ Holowaychuk, it is influenced by and seeks to improve upon predecessors like Sass and LESS. The language compiles into standard CSS, offering powerful features for writing more maintainable and expressive stylesheets with a highly flexible, indentation-based syntax.

Overview

Emerging in the early 2010s within the vibrant Node.js ecosystem, Stylus was developed to address perceived verbosity in other preprocessors. Its philosophy emphasizes minimalism and expressive power, allowing developers to write stylesheets that often resemble Python or CoffeeScript in their conciseness. The language is distributed as an npm package and integrates seamlessly into modern front-end build tools and workflows, gaining adoption in projects that prioritize developer experience and rapid prototyping.

Features

Stylus provides a comprehensive suite of features common to modern CSS preprocessors, including support for variables, mixins, functions, and nesting. It distinguishes itself with advanced features like property lookup, which allows values to be referenced from other properties within the same block, and transparent interpolation for both selectors and property names. The language also includes built-in functions for color manipulation, path joining, and mathematical operations, alongside robust error handling and conditional logic.

Syntax

The syntax of Stylus is famously permissive, supporting multiple coding styles within the same document. Developers can use a significant whitespace, indentation-based syntax reminiscent of CoffeeScript, omit colons and semicolons entirely, or write in a format nearly identical to traditional CSS. This flexibility extends to its handling of variables, where the sigil is optional, and mixins, which are defined and invoked without a special character, blurring the line between mixins and functions.

Preprocessors and Compilation

As a preprocessor, Stylus source code must be compiled into standard CSS before it can be interpreted by a web browser. The primary compiler is a JavaScript module for Node.js, typically installed via npm and integrated into build systems like Webpack, Gulp, or Grunt. The compilation process can include features such as in-line image embedding, syntax checking, and automatic vendor prefixing using libraries like Autoprefixer.

Integration and Usage

Stylus integrates deeply into the Node.js development stack and is commonly used within frameworks and tools popular in that ecosystem. It is a supported styling language in the Vue.js framework's official tooling and can be used in projects built with React or Angular through appropriate build configurations. Many code editors and IDEs, including Visual Studio Code and Sublime Text, offer syntax highlighting and extension support for `.styl` files.

Comparison with Other CSS Preprocessors

Compared to Sass and LESS, Stylus offers greater syntactic freedom, often resulting in more concise code. Unlike Sass's original Ruby dependency or LESS's initial JavaScript client-side focus, Stylus was designed from the outset for Node.js. While Sass has a larger community and more established frameworks like Compass, Stylus's feature set is highly competitive, particularly in its handling of mixins and property lookup, appealing to developers who prefer a less rigid structure.

Category:Style sheet languages Category:CSS preprocessors Category:Node.js software Category:Free software programmed in JavaScript