CSS4 Variables in Ionic

A Primer on CSS 4 Variables for Ionic 4



·

Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are and how we will be using them in Ionic applications.

In previous versions of Ionic, the theming and styling of Ionic relied mostly on using SASS, where we would define .scss files that would be compiled down into standard CSS at runtime. Ionic 4 will still be making use of SASS, so if you are currently making use of SASS in your project you don’t need to worry about changing things up too much.

One of the key differences between using something like SASS and CSS4 variables is that SASS is a preprocessor whereas CSS4 variables make use of standard CSS that is supported by browsers. The functionality made available through SASS doesn’t actually exist, we just use SASS style syntax, and then SASS will compile that into “normal” CSS for our application to use. This is basically the same idea as using TypeScript – the TypeScript we write doesn’t actually run in browsers, but the TypeScript compiler will convert that code into “normal” JavaScript that can be understood by browsers.

Why Use CSS4 Variables?

SASS provides us with more than just the ability to create variables in CSS, so why should we care about using CSS4 variables when the result is the same? It’s cool that we could use those without setting up SASS, but that’s already set up in Ionic anyway. What’s the big deal?

Primarily, as far as I see it at least, there are two key benefits to using CSS4 variables:

  • CSS4 variables can be modified at runtime. Since CSS4 variables are supported natively by the browser, there is no compile step required to get the variables working. This means that you could just open up the browser debugger, modify some variables, and see the changes take effect in your application immediately. This also means that you can modify these variables dynamically in your application. This would make it quite easy to build functionality like a light/dark theme switcher, where a user could toggle a switch and instantly change the theme of the entire application.
  • CSS4 variables cascade just like normal CSS rules. We will look at an example of this in a moment, but CSS4 variables behave just like any other CSS property. You could apply a variable globally to your entire application, but then you could overwrite that variable just for one specific <ion-list> (or all of them), or a <p> tag, and so on.

This isn’t going to flip application on its head, but it definitely has its advantages.

How Will CSS4 Variables Be Used in Ionic 4?

Now that we have the basic idea down, let’s take a look at how CSS4 variables might actually look in an Ionic application. First of all, a CSS4 variable looks like this:

--ion-background-color: #1f1e1e;

which is similar to a SASS variable, which looks like this:

$background-color: #1f1e1e;

In Ionic 3, we would commonly modify the $colors map to change the default styles for attributes like primary and secondary in our applications:

$colors: (
  primary:    #ecf0f1,
  secondary:  #e74c3c,
  danger:     #f53d3d,
  light:      #e74c3c,
  dark:       #222222
);

It was also possible to overwrite Ionic styles using SASS variables (as I have done with $background-color above), but I don’t think this was used as much as the $colors map. We will no longer use this $colors map in Ionic 4.

In Ionic 4, you will be able to use CSS4 variables to define your theme colours. If we wanted to set the same theme colours in Ionic 4 as the example above, we would do this instead:

:root {
    --ion-color-primary: #ecf0f1;
    --ion-color-secondary: #e74c3c;
    --ion-color-danger: #f53d3d;
    --ion-color-light: #e74c3c;
    --ion-color-dark: #222222;
}

We supply the corresponding CSS variables for each colour inside of the :root selector. The use of :root here is a pseudo selector, and is used to represent the root element of your DOM structure, which is typically <html>. So, don’t let the syntax freak you out, it’s basically the same thing as using:

html {
    --ion-color-primary: #ecf0f1;
    --ion-color-secondary: #e74c3c;
    --ion-color-danger: #f53d3d;
    --ion-color-light: #e74c3c;
    --ion-color-dark: #222222;
}

This means that the variables we supply inside of :root are going to apply across the entire application unless they are overwritten somewhere.

These variables are used in a lot of Ionic’s components, so a lot of your application will change right away by defining these. However, we might also want to use these colours for our own elements. In Ionic 3, with SASS, we could retrieve the values for colours in the $colors map by doing this:

.my-class {
    background-color: map-get($colors, primary);
}

In Ionic 4, with CSS variables, we would do this instead:

.my-class {
    background-color: var(--ion-color-primary);
}

We aren’t limited to just changing these colour variables. Many of Ionic’s styles are derived from these variables, so we can overwrite those with our own values if we like as well:

:root {
    --ion-item-background-color: #1f1e1e;
    --ion-background-color: #1f1e1e;
}

Adding the variables to the :root selector will apply those changes application wide, but as I mentioned before, CSS variables “cascade” just like other CSS properties. This means that we could also add CSS variables to other selectors:

app-page-settings {
    --ion-background-color: #fff;
    --ion-item-background-color: #fff;
}

In the example above, I have overwritten the variables for --ion-background-color and --ion-item-background-color, this means that anything inside of <app-page-settings> will be affected by these changes, but everything outside of that won’t be. I could then define different variables for something inside of <app-page-settings> to target that and its children specifically. The variables will behave just like normal CSS styles.

Summary

For a lot of people, using CSS 4 variables probably won’t change all that much, but it certainly does add some cool bonuses. There are functional benefits which will make changing application-wide styles dynamically from within your application much more feasible, but it also just adds a lot of niceties to development. It will be convenient to be able to mess with variables right from the debugger, and it’s also easier to see what variables are being used to determine an element’s styles (rather than having to hunt through the Ionic documentation to find the appropriate SASS variable).

What to watch next...