Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

CSS Variables

Explore how CSS variables enable reusable and semantically clear style rules in Ionic applications. Understand setting global and mode-specific variables, using fallbacks, and customizing Ionic component styles for effective theming.

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:

NAME_
CSS
{
  --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:

NAME_
CSS
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 ...