A mixin is a reusable style pattern that you define in the skin. Mixins enable you to create incremental styling changes which provide a natural cascading of styles.

Using mixins helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance. You can define mixins on the Mixins tab in the skin.

About Mixins

Mixins can define a reusable typography, border, or background style — or a style that is a combination of typography, border, and background styles.

 You can modify, add, and delete 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.

If you want to create a mixin that is a combination of text, background, or border styling, add a mixin within the Combinations category. 

Mixin inheritance

You can reuse mixins in other mixins and component style formats. This provides consistency and enables you to easily and efficiently make modifications to your UI styling.

A mixin can inherit styles from other mixins. For example, the Heading 1 mixin inherits text styling from the General mixin.

Note that a mixin can inherit some style elements from another mixin and override others. For example, the Heading 1 mixin inherits the Open Sans font from the General mixin, but overrides the Font size.

Using mixins in component style formats

Component style formats, such as dynamic layouts, or controls, such as buttons and links, can also inherit styling from mixins. You can reference one or multiple mixins to define the appearance of  component style formats.

For example, the Standard Button style format uses the General mixin to set its text styling.

Mixins and natural cascading of styles

Mixins can inherit from one another and component style formats can inherit from mixins. This provides a natural cascading of styles.

You can change mixins at any time. A change to a mixin cascades throughout all mixins and style formats in the skin that reference the mixin. This means that if you modified the General mixin, the change would display in all mixins and style formats that reference the General mixin, including the Standard Button style format.

Mixins and component style formats simplify your skin, ensure greater consistency, and enable easy and efficient modifications to your UI styling.