Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

About mixins

Updated on April 5, 2022

Use the Mixins tab to define mixins. A mixin is a reusable style pattern.

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

Mixins enable you to create incremental styling changes which provide a natural cascading of styles. You can reuse mixins in other mixins and component 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 Modifying an existing mixin, Defining a new mixin, and Deleting a mixin 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. You cannot move a mixin to another category. However, you can Skin rules - Renaming a mixin.

The arrow indicates the currently selected mixin.

  • Defining a new mixin

    To create a new mixin, click Add. The mixin is populated with default values.

  • Modifying an existing mixin

    To modify an existing mixin:

  • Skin rules - Renaming a mixin

    Renaming a mixin

  • Deleting a mixin

    You cannot delete a mixin if another mixin or component inherits styles from that mixin. Mixins and components that reference the selected mixin display in the Preview with list on the right.

  • Determining where a mixin is referenced

    Determining where a mixin is referenced

  • Mixins tab of the Skin rules form

    Use the Mixins tab to define mixins (reusable style patterns). Mixins can define a reusable typography, border, or background style, or a style that is a combination of these styles. Using mixins helps ensure consistency across your user interface, maximize re-use, and minimize future maintenance.

  • Skin rules

    Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentati

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us