CSS Variables

CSS variables (also known as CSS custom properties) are a very useful and powerful tool when writing CSS. A developer can set a number of variables with specific values and then use them throughout the code.

You can set your variables on the :root element

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

We can then call these variables throughout the rest of our styling like so.

h1 {
  color: var(--primary-color);
}
h2 {
  color: var(--secondary-color);
}
.gradient {
  background: linear-gradient(
    0.25turn,
    var(--primary-color),
    var(--secondary-color)
  );
}

Unfortunately support for CSS variables isn’t the wide spread in email yet. However when using the CSS variables transformer we will pre-process the code for you so it will render as in an email friendly format.

h1 {
  color: #ff0000;
}
h2 {
  color: #00ff00;
}
.gradient {
  background: linear-gradient(0.25turn, #ff0000, #00ff00);
}

Preserve CSS variables

We also have the option to preserve the CSS variables. This can be useful if you are doing some more advanced coding techniques. In that case we will still process the variables into an email friendly format to work as a fallback but also keep the variable in the code for those email clients that do support them

h1 {
  color: #ff0000;
  color: var(--primary-color);
}
h2 {
  color: #00ff00;
  color: var(--secondary-color);
}
.gradient {
  background: linear-gradient(0.25turn, #ff0000, #00ff00);
  background: linear-gradient(
    0.25turn,
    var(--primary-color),
    var(--secondary-color)
  );
}

Limitation

CSS Variables can hold any value that you would put into a CSS property, so the uses are very wide with lots of potential.

Currently we only support setting variables on the :root element and only support using them inside <style> blocks.