Mastering Mobile Application Development with Ionic/

...

/

CSS Variables

CSS Variables

Learn about custom CSS variables and how to define and use them in Ionic applications.

We'll cover the following...

What are CSS variables?

If you’re not already familiar with CSS variables, these are simply entities that help define style rules that can be reused throughout a document.

CSS variables are set using custom property notation and prefixed with a double dash (--), allowing these properties to be constructed as follows:

Press + to interact
{
  --main-text-heading-color: rgba(68, 68, 68, 1);
  --main-text-heading-size: 2.5rem;
  --main-text-heading-background-color: rgba(255, 255, 255, 1);
}

These custom variables are then able to be accessed and used to supply style rules throughout an application using the var() function, like so:

Press + to interact
element {
  color: var(--main-text-heading-color);
  font-size: var(--main-text-heading-size);
  background-color: var(--main-text-heading-background-color);
}

Fallback options

CSS variables also allow single or multiple fallback options to be declared if the given variable is not yet defined, like fallback options ...