Using mixin variables
Mixins are the most effective way to brand and theme your application. A mixin is a design token that can be applied to different components and can be used to affect typography, colors, and border styles. When writing additional CSS files to create new helper classes, it is important NOT to hardcode colors and other design tokens into these files and instead to refer to values from mixin.
Mixin variables are a way to reference a value from a mixin. The value will be inserted into the auto-generated CSS file automatically at runtime.
Note: CSS files attached to a harness are not going through the skin pre-processing and can not use mixin variables. As such, any mixin variables that are used in a CSS file attached to a harness are not replaced by the mixin value and only additional CSS files defined in the skin ruleform supports mixin variables
Using a mixin variable
Mixin variables start with $mx-.
When $mx- is entered in a CSS file, a drop-down with mixin variables for your application skin is displayed.
Note: If the mixin variable does not exist, then it will be replaced by an empty value during the CSS generation at runtime.
Let's look at the banner-error helper class. Hardcoding the red color in the file is not best practice. If the design changes and the color needs to be changed, it is better to update one mixin that affects all of the component formats and additional CSS files at once rather than to edit every single CSS file.
When removing the word red and entering $mx-, a drop-down of the available mixin variables is displayed.
Mixin variables are formatted as mx-<format name>-<css attribute>.
Note: The <format name> is the name of the mixin in lowercase. For mixins composed of several words, spaces are replaced with an underscore. for example, Menu Inactive would be menu_inactive in the variable name.
If you want to replace the red value with the background color set on the error mixin value, then the mixin variable to use is mx-error-background-color.
Since the error mixin is a combination mixin, it has different CSS attributes like background color, border, and typography. Entering a dash after the format name will update the drop-down list with CSS attributes that are supported by this mixin.
Below is an example of CSS selectors using mixin variables:
custom_style_rule_selector{
color: $mx-general_color;
font-weight: $mx-general_font-weight;
border: $mx-menu_inactive-border-bottom-width solid #fff;
}
color: $mx-general_color;
font-weight: $mx-general_font-weight;
border: $mx-menu_inactive-border-bottom-width solid #fff;
}
Using your own mixin variables in override CSS
It is possible to use mixin variable directly inside the override CSS files attached to the skin ruleform as additional CSS files.
Note: It is not possible to override the value of a mixin value like $mx-general-color into your override CSS files. Since the value is already defined before processing the CSS, it is replaced with the existing value. Overriding a mixin value is not best practice.
The variable must start with the $ sign and must be defined before being referenced.
For example, if your override CSS file contains the following lines:
/* This is my overall margin settings */
$myapplication-margin-right:14px;
$myapplication-margin-left:14px;
/* Change the margin for buttons */
.pzhc.pzbutton {
margin-right:$myapplication-margin-right;
}
$myapplication-margin-right:14px;
$myapplication-margin-left:14px;
/* Change the margin for buttons */
.pzhc.pzbutton {
margin-right:$myapplication-margin-right;
}
when parsed through the CSS pre-processor, the output CSS will be:
/* This is my overall margin settings */
/* Change the margin for buttons */
.pzhc.pzbutton {
margin-right:14px;
}
/* Change the margin for buttons */
.pzhc.pzbutton {
margin-right:14px;
}
Note: In this scenario, the value assigned to a variable must be static and cannot contain a reference to another variable.
Viewing values used by the variables
Assuming that the following helper class was added to your application skin:
/****************************************
Type: helper-class
Name: banner-error
Category: layout
Description: this layout will add an 'error' background color around a container format
*********************************************************/
.banner-error {
border: 1px solid $mx-error-background-color;
}
Type: helper-class
Name: banner-error
Category: layout
Description: this layout will add an 'error' background color around a container format
*********************************************************/
.banner-error {
border: 1px solid $mx-error-background-color;
}
You can use the following methods to confirm that the correct value is set on the helper class when used.
-
Use the View mixin variables action
Open your application skin, and then click View mixin variables from the Actions menu. A new window opens with a list of mixin variables and values. Search for the mixin variable in which you are interested.
-
Use the Preview action
Open your application skin, and then click Preview in the Actions menu. The auto-generated CSS is displayed in a new window. Search for your helper class to see which value the mixin-variable is replaced with at runtime.
Check your knowledge with the following interaction.
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?