Stylus @Import Decision Guide: Modular Stylesheets Without Ambiguity
Stylus offers multiple @import forms and path-resolution modes. This guide compares them, explains trade-offs, and shows how to validate a modular build with the 0.54.8 CLI.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Stylus offers multiple @import forms and path-resolution modes. This guide compares them, explains trade-offs, and shows how to validate a modular build with the 0.54.8 CLI.
Choose between compiling Less with lessc and using native CSS nesting and custom properties, with build commands, validation checks, and rollback steps.
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.
Use Stylus mixins to centralize spacing, color, and radius values so changing one token updates every component at build time.
Stop writing redundant mixins for different argument counts. Learn how to use Stylus variadic mixins with the ... syntax to create flexible, composable CSS utilities.
Use Stylus & nesting for BEM-style components, but cap depth at two or three levels to control specificity and keep overrides simple.
Stylus css literals let you embed raw CSS verbatim without parsing. Learn when to use the escape hatch for vendor prefixes and third-party snippets, and how to verify the output stays unchanged.
Learn how to use Less parametric mixins to eliminate CSS duplication and create dynamic, reusable style patterns that compile to standard CSS.