# Stylus — Expressive Dynamic CSS Preprocessor for Node.js

> Stylus is a CSS preprocessor built for Node.js that offers an expressive, flexible syntax with optional colons, semicolons, and braces. It provides powerful features like transparent mixins, iteration, and interpolation while generating clean, standard CSS.

## Install

Save as a script file and run:

# Stylus — Expressive Dynamic CSS Preprocessor for Node.js

## Quick Use
```bash
# Install globally
npm install -g stylus

# Compile a .styl file to CSS
stylus styles.styl

# Watch for changes and auto-compile
stylus --watch styles.styl
```

## Introduction
Stylus is a CSS preprocessor created by TJ Holowaychuk (also known for Express.js and Mocha). It offers the most flexible syntax among CSS preprocessors — braces, colons, and semicolons are all optional. This minimalist approach produces clean, readable stylesheets while providing powerful features like transparent mixins, built-in functions, and iteration.

## What Stylus Does
- Compiles an indentation-based stylesheet language into standard CSS
- Supports variables, nesting, mixins, and functions with a minimal syntax
- Provides transparent mixins that look like native CSS properties
- Includes built-in functions for color manipulation, math, and URL embedding
- Integrates with Node.js build pipelines via middleware and plugins

## Architecture Overview
Stylus is a Node.js-based compiler that tokenizes `.styl` files, builds an AST, resolves mixins and variables through lexical scoping, and emits CSS. The parser handles both the indentation-based syntax and the traditional CSS syntax interchangeably in the same file. The plugin architecture exposes the AST for transformations, enabling features like automatic vendor prefixing (via nib) and sprite generation.

## Self-Hosting & Configuration
- Install via npm: `npm install stylus --save-dev`
- Integrate with webpack using `stylus-loader`
- Use the `nib` plugin for cross-browser mixins and vendor prefixes
- Configure Stylus middleware in Express.js for on-the-fly compilation
- Enable source maps with `--sourcemap` for debugging in browser DevTools

## Key Features
- Optional syntax — write CSS without braces, colons, or semicolons
- Transparent mixins that blend seamlessly with native CSS properties
- Iteration and conditionals (`for`, `if/else`) for generating repetitive CSS
- Powerful built-in functions: `darken()`, `lighten()`, `rgba()`, `unit()`
- Rest params and argument introspection in mixin definitions

## Comparison with Similar Tools
- **Sass/SCSS** — larger ecosystem and community; Stylus offers more syntactic freedom
- **Less.js** — closer to CSS syntax; Stylus allows a more concise, Python-like style
- **PostCSS** — plugin-based transformer; Stylus is a complete preprocessor language
- **Tailwind CSS** — utility-first approach; Stylus is for writing custom component-scoped styles

## FAQ
**Q: Is Stylus still maintained?**
A: The project receives maintenance updates. The core feature set is stable and complete for production use.

**Q: Can I mix Stylus and regular CSS syntax?**
A: Yes. Stylus accepts both indentation-based syntax and standard CSS in the same file.

**Q: Does Stylus work with Vue.js single-file components?**
A: Yes. Vue supports `<style lang="stylus">` blocks natively with the appropriate loader.

**Q: How does Stylus handle vendor prefixes?**
A: Use the `nib` library, which provides transparent mixins that automatically add vendor prefixes where needed.

## Sources
- https://github.com/stylus/stylus
- https://stylus-lang.com/

---
Source: https://tokrepo.com/en/workflows/asset-fdb63f56
Author: Script Depot