30

CSS variables

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.

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.