Less Variables vs. Mixins for Shared Property Sets

Design Trade-off for Reusable Styles

When managing a design system in Less, there is a structural choice between utilizing individual variables for specific values or grouping those values into a mixin for broader abstraction.

Using variables allows for high granularity and a single point of update for specific brand tokens. Conversely, mixins can group multiple related properties, such as a set of typography rules or flexbox alignments, to reduce repetition across selectors.

The primary constraint is balancing the maintainability of the source code against the potential for CSS bloat in the compiled output, as deeply nested or repetitive mixins can increase the final file size compared to targeted variable usage.

Which approach is more sustainable for a large-scale project where property sets change frequently? Under what conditions does the abstraction of a mixin outweigh the granularity of variables in terms of compiled CSS efficiency?