Lesson Outline

CSS Variables

Since Ionic 4, Ionic has switched to using CSS variables instead of SASS variables. CSS variables behave in much the same way as a SASS variable, but one of the primary benefits of CSS variables is that they are native to the browser, and don't require pre-compiling like SASS variables do. Although SASS is still used in Ionic, and you can use all of the features of SASS as you wish (as we will be covering in a moment), you probably won't really need to know much about how it works if you don't want to use it. Most people will just tinker with a few CSS variables, rather than making use of other SASS features.

I will assume you already understand the basics of CSS Variables and Shadow DOM with Ionic (if not, you might want to read this). This lesson is going to focus on some more advanced things that we can do with SASS.

Syntactically Awesome Style Sheets

Although Ionic has moved from SASS to CSS for handling variables, SASS is still set up in Ionic/Angular projects by default and we can make use of the more advanced features it offers. In a lot of cases, this functionality won't be necessary, but for more complex/advanced use cases you can pull off some really cool stuff.

If you aren't already familiar with the concept behind SASS, let's go over that briefly. In a similar way to how Ionic uses TypeScript instead of vanilla JavaScript which allows us to use features that are not yet in standard JavaScript, Ionic also uses Syntactically Awesome Style Sheets (SASS) which adds some additional functionality to CSS. SASS uses pre-processing to take stylesheets that you write using the SASS syntax, and generates standard CSS files from that when your application is built.

Whether or not you are familiar with SASS, you will have noticed that the files we use for styling in Ionic projects are .scss not .css. The .scss file extension stands for "Sassy CSS" which is a superset of the standard CSS syntax. The .scss files will eventually get compiled into a normal .css file (just like TypeScript is a superset of JavaScript and gets compiled into normal JavaScript files).