Mixins vs. Functions: Which to Use for Reusable Style Logic in Stylus?

Goal

Determine the most suitable approach—mixins or functions—for encapsulating reusable style logic in Stylus projects, balancing maintainability, CSS output size, and build performance.

Context

Stylus offers mixins that can inject blocks of CSS, and functions that return values for property calculations. Mixins allow positional and keyword arguments, enabling flexible composition, but their expansion can increase compiled CSS size and obscure source origins. Functions are pure, enabling memoization and potentially faster compile times, yet they cannot directly set multiple properties.

Uncertainty

When a style rule needs to be reused across many selectors, developers face a trade‑off: using a mixin may reduce code duplication but risk CSS bloat, while a function may keep CSS lean but requires additional property declarations. The impact on build time and source‑map clarity is also unclear.

Questions

• Which approach—mixins or functions—produces the smallest compiled CSS when the same style block is applied to dozens of selectors?
• How does function memoization affect Stylus build times compared to the compile‑time evaluation of mixins?
• Can mixins be effectively scoped to limit CSS output growth while preserving readable source maps?