CSS variables
Design Studio New UpdatedThis article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
CSS 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.
