Mixins

Mixins are reusable style patterns that define the typography, border, and background styles of UI components in your application. By using mixins, you can ensure consistency across the user interface, maximize re-use, and minimize future development effort.

Mixins help you create incremental styling changes through reuse and inheritance. While component styles contain a cluster of formats that define the appearance of a particular UI element, such as a button, mixins store only simple style patterns, such as a background color, that you can reuse in different contexts. For example you can use the same mixin in several component styles, or set up mixins to inherit from other mixins. If you base your styling decisions on a system of mixins, any formatting update automatically cascades to all elements in the skin that use the affected mixins, which improves the visual coherence of your interface.

For example, you can set up a green background mixin that you want to associate with the act of confirming an action. To this end, you use it in the OK button style format, as well as the format for tooltips that inform the user about the decision that they are about to confirm. If you decide to change the green mixin at any point, both style formats update automatically.

For more information about mixins, see Styling the UI: Why do mixins matter?