CSS variables
BetaThis feature is new and we're actively working to improve it. UpdatedCSS variables (also known as CSS custom properties) help you define reusable styles and reduce duplication across your stylesheets. However, most email clients don’t support them. The CSS Variables transformer solves this by inserting the values of the variables.
Statically insert :root
CSS variables
Enable this transformer to convert your CSS variables into styles that are compatible with more email clients.
Define CSS variables on the :root
element in a <style>
tag
We currently only support CSS variables defined in this way. We won’t process CSS variables on other elements or tags.
For instance, if you set these variables:
:root {
--primary-color: #ff0000;
--secondary-color: #00ff00;
}
h1 {
color: var(--primary-color);
}
h2 {
color: var(--secondary-color);
}
.gradient {
background: linear-gradient(
0.25turn,
var(--primary-color),
var(--secondary-color)
);
}
Then this transformer would convert them to:
h1 {
color: #ff0000;
}
h2 {
color: #00ff00;
}
.gradient {
background: linear-gradient(0.25turn, #ff0000, #00ff00);
}
Preserve CSS variables
Enable this if you want to maintain your CSS variables in your source code, but have us generate a fallback for email clients that don’t support CSS variables.