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.
Less mixin guards use the `when` keyword to create compile-time pattern matching for conditional styling — think functional pattern matching for CSS. This post walks through a practical button-variant pattern, the string-token trap, and why guard ordering matters.
Learn how to create parameterized, self‑contained CSS blocks in Stylus using mixins that accept arguments and local variables. The article walks through syntax, scoping, a full example, and common pitfalls to avoid.
Stylus mixins with default parameters let you define reusable CSS rule blocks that gracefully handle missing arguments. Learn the syntax, see a worked button example, understand nested scope for theming, and avoid the silent-fallback trap.
Learn how to use Less parametric mixins with guards to generate breakpoint‑aware typography without repeating media queries.
Use Pug mixins to render reusable tables and components from one parameterized template instead of copying markup across pages.
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.