Reducing Style Drift with Stylus Indented Syntax and Mixins
Stop duplicating CSS properties across component variants. Learn how Stylus indented syntax, design tokens, and mixins centralize style logic to prevent drift and simplify maintenance.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Stop duplicating CSS properties across component variants. Learn how Stylus indented syntax, design tokens, and mixins centralize style logic to prevent drift and simplify maintenance.
Learn how to create and use Stylus mixins that accept arguments and default values, reduce duplication, and keep your styles flexible. A step‑by‑step button example shows how to override defaults, import mixins, and validate the output.
Centralize design tokens in Sass maps, generate utilities with mixins, and use functions for fluid calculations — while keeping an eye on compiled CSS bloat.
A step‑by‑step guide to creating reusable Pug mixins with explicit parameters, block content injection, and CLI verification—covering version‑specific syntax, common pitfalls, and recovery steps.
Use Stylus mixins to centralize spacing, color, and radius values so changing one token updates every component at build time.
Centralize button markup with Pug mixins and &attributes to keep server‑rendered templates DRY while safely handling attribute merging.
Stop copying button markup across Pug templates. Mixins with parameters and block slots let you define a UI component once and reuse it with different labels, variants, and caller-supplied content.
Learn how to use Sass mixins with @content to keep component styles DRY while avoiding CSS bloat. Read a concrete example, trade‑offs, and best practices for reusable component styling.
A decision guide for Less 3.x theme systems: compare parametric mixins with default guards against fixed-arity mixins and value-map functions, with a concrete compilation and validation workflow.