# stylus/stylus

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/stylus-stylus).**

11,323 stars · 1,136 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/stylus/stylus
- Homepage: https://stylus-lang.com
- awesome-repositories: https://awesome-repositories.com/repository/stylus-stylus.md

## Topics

`css` `preprocessor` `styl` `stylus`

## Description

Stylus is a CSS preprocessor that transforms a dynamic language into standard CSS. It utilizes a compilation workflow to enable the use of variables, nesting, and arithmetic, which are then rendered into stylesheets for use in frontend asset pipelines.

The project is distinguished by a flexible syntax that allows for indentation-based styling, meaning curly braces, colons, and semicolons can be omitted. It further differentiates itself through a JavaScript-driven plugin pipeline and the ability to extend the native syntax with custom JavaScript functions for complex logic.

Its capability surface covers a wide range of authoring tools, including hierarchical selector nesting, reusable mixins, and a comprehensive color management system for mixing and transforming values. The compiler also supports programmatic style generation through mathematical operations, list and hash iteration, and conditional logic evaluation.

The toolset includes a standalone command-line interface for compilation and reverse compilation, as well as middleware for automated CSS updates and source map generation for debugging.

## Tags

### Part of an Awesome List

- [CSS Preprocessors](https://awesome-repositories.com/f/awesome-lists/devtools/css-preprocessors.md) — Transforms a flexible, indentation-based preprocessor language into standard CSS. ([source](https://cdn.jsdelivr.net/gh/stylus/stylus@dev/README.md))
- [Color Manipulation](https://awesome-repositories.com/f/awesome-lists/devtools/color-manipulation.md) — Provides utilities to get or set specific color channels including red, green, blue, alpha, and hue. ([source](https://stylus-lang.com/docs/bifs))

### User Interface & Experience

- [Preprocessing Variables](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/preprocessing-variables.md) — Implements a robust system for storing reusable values in variables and interpolating them into CSS declarations. ([source](https://stylus-lang.com/docs/))
- [Color Format Normalizers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/color-utilities/color-format-normalizers.md) — Casts colors between different representations such as RGBA and HSLA. ([source](https://stylus-lang.com/docs/bifs))
- [Outer Selector Referencing](https://awesome-repositories.com/f/user-interface-experience/css-selectors/outer-selector-referencing.md) — Supports referencing the parent selector within nested rules to create pseudo-selectors and state modifiers. ([source](https://stylus-lang.com/docs/mixins))
- [Selector Nesting](https://awesome-repositories.com/f/user-interface-experience/css-selectors/selector-nesting.md) — Implements hierarchical selector nesting to generate nested CSS rules and resolve parent references.
- [Expression Iterators](https://awesome-repositories.com/f/user-interface-experience/data-iterators/prompt-list-iteration/list-iteration/expression-iterators.md) — Provides the ability to loop through lists and ranges to programmatically generate repetitive CSS rules. ([source](https://stylus-lang.com/docs/iteration))
- [Programmatic Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators/programmatic-style-generators.md) — Programmatically generates CSS rules and values using variables, loops, and mathematical operations during compilation.
- [At-Rule Implementations](https://awesome-repositories.com/f/user-interface-experience/at-rule-implementations.md) — Renders standard and future CSS at-rules using a braceless, indentation-based syntax. ([source](https://stylus-lang.com/docs/atrules))
- [Color Blending](https://awesome-repositories.com/f/user-interface-experience/color-spaces/color-blending.md) — Provides utilities for mixing and blending multiple colors using ratios and contrast calculations. ([source](https://stylus-lang.com/docs/bifs))
- [Color Rendering Adjustments](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments.md) — Enables adjustment of RGB, HSL, and alpha channels to shift and modify color output. ([source](https://stylus-lang.com/docs/operators))
- [CSS Minification](https://awesome-repositories.com/f/user-interface-experience/css-minification.md) — Reduces the size of generated stylesheets by removing unnecessary whitespace and characters. ([source](https://stylus-lang.com/docs/))
- [CSS Reverse Compilers](https://awesome-repositories.com/f/user-interface-experience/css-reverse-compilers.md) — Converts standard CSS files back into terse preprocessor syntax. ([source](https://stylus-lang.com/docs/executable))
- [Nested Selector Escaping](https://awesome-repositories.com/f/user-interface-experience/css-selectors/nested-selector-escaping.md) — Allows starting a selector at the root level to define styles outside the current nesting scope. ([source](https://stylus-lang.com/docs/selectors))
- [Selector Interpolation](https://awesome-repositories.com/f/user-interface-experience/css-selectors/selector-interpolation.md) — Inserts the results of dynamic expressions directly into property names or CSS selectors. ([source](https://stylus-lang.com/docs/interpolation))
- [Extendable Placeholders](https://awesome-repositories.com/f/user-interface-experience/customizable-workspaces/workflow-extenders/extendable-placeholders.md) — Defines hidden selectors that are only rendered in the final CSS when extended by other rules. ([source](https://stylus-lang.com/docs/extend))
- [CSS Animations](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/css-animations.md) — Facilitates the definition of keyframe rules using flexible syntax and interpolation for visual transitions. ([source](https://stylus-lang.com/docs/keyframes))
- [Viewport-Based Definitions](https://awesome-repositories.com/f/user-interface-experience/style-props-frameworks/property-based-style-mappings/responsive-style-mappings/viewport-based-definitions.md) — Utilizes block notation and nested queries to define styles that adapt to different viewport dimensions. ([source](https://stylus-lang.com/docs/media))
- [Selector Style Inheritance](https://awesome-repositories.com/f/user-interface-experience/style-selectors/selector-style-inheritance.md) — Enables sharing properties between rulesets to simplify the maintenance of semantic styles. ([source](https://stylus-lang.com/docs/extend))
- [Nested Imports](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/nested-imports.md) — Places imported styles inside specific CSS selectors to restrict their application to a subset of elements. ([source](https://stylus-lang.com/docs/import))

### Web Development

- [CSS Preprocessing Workflows](https://awesome-repositories.com/f/web-development/css-preprocessing-workflows.md) — Implements a complete workflow for transforming a dynamic preprocessor language into standard CSS.
- [CSS Preprocessors](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/asset-lifecycle-orchestration/asset-pipelines/css-preprocessors.md) — Transforms a dynamic preprocessor language into standard CSS via a standalone command-line executable. ([source](https://stylus-lang.com/docs/))
- [CSS Media Queries](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation/css-media-queries.md) — Injects variables and expressions into media query definitions to programmatically calculate breakpoints. ([source](https://stylus-lang.com/docs/media))
- [Vendor Prefix Managers](https://awesome-repositories.com/f/web-development/vendor-prefix-managers.md) — Expands animation rules into multiple vendor-specific versions to ensure cross-browser compatibility. ([source](https://stylus-lang.com/docs/keyframes))

### Content Management & Publishing

- [Sequence Generators](https://awesome-repositories.com/f/content-management-publishing/q-a-content-strategies/range-generators/sequence-generators.md) — Creates lists of values between two points using inclusive or exclusive range operators. ([source](https://stylus-lang.com/docs/operators))

### Data & Databases

- [Key-Value Pair Managers](https://awesome-repositories.com/f/data-databases/key-value-pair-managers.md) — Provides utilities for storing and retrieving named values using hashes to organize configurations and constants. ([source](https://stylus-lang.com/docs/hashes))
- [Hash Iterators](https://awesome-repositories.com/f/data-databases/key-value-store-iterators/hash-iterators.md) — Allows looping over key-value pairs to dynamically generate CSS rules based on defined data. ([source](https://stylus-lang.com/docs/hashes))
- [Index-Based Extraction](https://awesome-repositories.com/f/data-databases/list-index-locations/index-based-reorganizations/index-based-extraction.md) — Implements zero-based indexing to retrieve specific elements from expressions or tuples. ([source](https://stylus-lang.com/docs/operators))

### Development Tools & Productivity

- [Stylesheet Compilation](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/stylesheet-compilation.md) — Transforms a dynamic preprocessor language featuring nesting, variables, and arithmetic into standard CSS. ([source](https://stylus-lang.com/docs/executable))
- [AST Rendering Engines](https://awesome-repositories.com/f/development-tools-productivity/css-ast-transformations/ast-rendering-engines.md) — Transforms a custom syntax tree into standard CSS using a recursive rendering engine.
- [Stylesheet Function Definitions](https://awesome-repositories.com/f/development-tools-productivity/custom-task-functions/stylesheet-function-definitions.md) — Creates reusable logic blocks that accept arguments and return values for use within stylesheets. ([source](https://stylus-lang.com/docs/functions))
- [External Configuration Integration](https://awesome-repositories.com/f/development-tools-productivity/external-configuration-integration.md) — Extends compiler capabilities by loading external modules and passing configuration arguments to them. ([source](https://stylus-lang.com/docs/executable))
- [Style Mixins](https://awesome-repositories.com/f/development-tools-productivity/style-mixins.md) — Provides reusable mixins to define sets of styles and logic that can be injected into multiple selectors. ([source](https://stylus-lang.com/docs/))
- [Compiler Logic Extensions](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/system-integration-interfaces/automation-apis/scripting-apis/custom-logic-extensions/javascript-logic-extensions/compiler-logic-extensions.md) — Adds custom JavaScript functions to perform complex logic not possible within the native preprocessor syntax. ([source](https://stylus-lang.com/docs/js))
- [Code Transformation APIs](https://awesome-repositories.com/f/development-tools-productivity/api-development-sdks/development-apis/code-transformation-apis.md) — Provides APIs to render custom syntax strings into standard CSS using specific configuration options. ([source](https://stylus-lang.com/docs/js))
- [CSS Parsing](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools/ast-structure-modification/css-parsing.md) — Processes stylesheets using standard CSS syntax, allowing existing CSS files to be used within the preprocessor. ([source](https://stylus-lang.com/docs/css-style))
- [Compilation Error Reporting](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/compilation-error-reporting.md) — Identifies syntax and evaluation failures by providing stack traces, line numbers, and filenames during compilation. ([source](https://stylus-lang.com/docs/error-reporting))
- [Dynamic Variable Interpolations](https://awesome-repositories.com/f/development-tools-productivity/dynamic-variable-evaluators/dynamic-variable-interpolations.md) — Looks up and defines variables using string names to allow dynamic interpolation. ([source](https://stylus-lang.com/docs/bifs))
- [Compiler Context Inspection](https://awesome-repositories.com/f/development-tools-productivity/execution-context-management/javascript-execution-contexts/compiler-context-inspection.md) — Enables retrieval of the current compiled selector, active media rule, and function call stack for logic purposes. ([source](https://stylus-lang.com/docs/bifs))
- [Node.js Build Tools](https://awesome-repositories.com/f/development-tools-productivity/node-js-build-tools.md) — Provides CLI tools and middleware for integrating the CSS compiler into Node.js-based development environments.
- [Source Map Generators](https://awesome-repositories.com/f/development-tools-productivity/source-map-generators.md) — Generates source maps that link the final CSS output back to the original preprocessor source for easier debugging. ([source](https://stylus-lang.com/docs/sourcemaps))
- [Source File Watching](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/development-automation/development-rebuild-triggers/source-file-watching.md) — Monitors source files for changes and automatically regenerates output CSS in real time. ([source](https://cdn.jsdelivr.net/gh/stylus/stylus@dev/README.md))

### Programming Languages & Runtimes

- [Compilation Math Operations](https://awesome-repositories.com/f/programming-languages-runtimes/compilation-math-operations.md) — Includes built-in support for trigonometric values, rounding, and base conversion during stylesheet compilation. ([source](https://stylus-lang.com/docs/bifs))
- [Compile-Time Expression Evaluation](https://awesome-repositories.com/f/programming-languages-runtimes/compile-time-expression-evaluation.md) — Computes mathematical, logical, and color values during the compilation phase using a custom evaluator.
- [Whitespace-Based Block Scoping](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/language-syntax/whitespace-based-block-scoping.md) — Utilizes significant whitespace and indentation to determine block nesting and scope instead of curly braces.
- [List Manipulation Utilities](https://awesome-repositories.com/f/programming-languages-runtimes/list-manipulation-utilities.md) — Offers primitives for adding, removing, and retrieving elements from lists using index and slice operations. ([source](https://stylus-lang.com/docs/bifs))
- [String Manipulation](https://awesome-repositories.com/f/programming-languages-runtimes/string-manipulation.md) — Provides comprehensive string manipulation including searching, replacing, splitting, and slicing with regular expressions. ([source](https://stylus-lang.com/docs/bifs))
- [Stylesheet Imports](https://awesome-repositories.com/f/programming-languages-runtimes/stylesheet-imports.md) — Includes style definitions and configurations from external files to share logic across multiple documents. ([source](https://stylus-lang.com/docs/))
- [Logical Operation Evaluation](https://awesome-repositories.com/f/programming-languages-runtimes/undefined-behavior-detection/integer-overflow-detections/compile-time/logical-operation-evaluation.md) — Evaluates boolean logical operators during the compilation phase to determine if styles are included. ([source](https://stylus-lang.com/docs/operators))
- [Variable Assignments](https://awesome-repositories.com/f/programming-languages-runtimes/variable-assignments.md) — Assigns expressions or lists to identifiers to ensure consistent styling across a stylesheet. ([source](https://stylus-lang.com/docs/variables))
- [Code Block Interpolations](https://awesome-repositories.com/f/programming-languages-runtimes/code-block-interpolations.md) — Allows assigning chunks of styles or logic to variables for reuse via interpolation. ([source](https://stylus-lang.com/docs/block))
- [Block Expression Evaluations](https://awesome-repositories.com/f/programming-languages-runtimes/compile-time-expression-evaluation/block-expression-evaluations.md) — Evaluates expressions at compile time to determine whether specific blocks of styles or properties are included in the output. ([source](https://stylus-lang.com/docs/conditionals))
- [Logic Block Passing](https://awesome-repositories.com/f/programming-languages-runtimes/logic-block-passing.md) — Allows entire blocks of CSS rules to be passed into mixins for contextual rendering. ([source](https://stylus-lang.com/docs/mixins))
- [Unit Casting](https://awesome-repositories.com/f/programming-languages-runtimes/unit-casting.md) — Allows forcing a specific unit suffix onto an expression as a shorthand for conversion. ([source](https://stylus-lang.com/docs/operators))

### Software Engineering & Architecture

- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Exposes a renderer instance to external functions to automate the definition of settings and paths via a plugin system. ([source](https://stylus-lang.com/docs/js))
- [Recursive AST Renderers](https://awesome-repositories.com/f/software-engineering-architecture/recursive-validation-engines/recursive-ast-traversal/recursive-ast-renderers.md) — Transforms custom syntax trees into standard CSS using a recursive engine to resolve styles.
- [Color Value Transformations](https://awesome-repositories.com/f/software-engineering-architecture/compositional-transformation-pipelines/color-transformation-pipelines/color-value-transformations.md) — Includes built-in functions to lighten, darken, desaturate, or invert colors. ([source](https://stylus-lang.com/docs/bifs))
- [Global Variable Injections](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/view-template-component-injection/global-variable-injections.md) — Defines global variables that remain accessible throughout the entire stylesheet evaluation process. ([source](https://stylus-lang.com/docs/js))
- [Compiler Extension Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/plugin-based-architectures/javascript-plugin-runtimes/compiler-extension-pipelines.md) — Extends the compiler via a JavaScript-driven pipeline that allows external functions to manipulate rendering.

### DevOps & Infrastructure

- [Frontend Asset Pipelines](https://awesome-repositories.com/f/devops-infrastructure/production-deployment-tools/frontend-asset-pipelines.md) — Integrates into frontend pipelines to compile source files into optimized CSS with source maps and vendor prefixing.