mixin

A mixin is a reusable style pattern that you define in the skin. Mixins can define a reusable text, border, or background style — or any combination of text, border, and background styles.

Mixins enable you to create incremental styling changes and provide a natural cascading of styles. A mixin can inherit styles from other mixins. Components can also inherit styles from mixins. You can reference one or multiple mixins to define the appearance of UI components, such as buttons or links.

Using mixins helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance. You can change mixins at any time. A change to a mixin cascades throughout all elements in the skin that reference the mixin.

You can define or modify mixins in the following categories:

• Typography — text styling mixin. Mixins in this category can inherit from other mixins containing text styling.
• Backgrounds — background styling mixin. Mixins in this category can inherit from other mixins containing background styling.
• Borders — border styling mixin. Mixins in this category can inherit from other mixins containing border styling.
• Combinations — combination of text, border, or background styles. Mixins in this category can inherit from any other mixins.

Related terms

Open topic with navigation