- Source Code & Resources PRO
- Lesson 1: Introduction PUBLIC
- Lesson 2: The Difference Between UI and UX PUBLIC
- Lesson 3: General Concepts PUBLIC
- Lesson 4: A Brief Introduction to Accessibility PRO
- Lesson 5: Navigation Concepts PRO
- Lesson 6: Actual Performance & Perceived Performance PRO
- Lesson 7: Controlling the Layout PRO
- Lesson 8: Utilising CSS Grid & Flexbox PRO
- Lesson 9: Creating a Layout That Adapts to Desktop PRO
- Lesson 10: CSS Variables and Syntactically Awesome Style Sheets (SASS) PRO
- Lesson 11: Improving Form UX PRO
- Lesson 12: Animating with CSS PRO
- Lesson 13: Animating with Angular PRO
- Lesson 14: Animating with Ionic and the Web Animations API PRO
- Lesson 16: Scalable Vector Graphics (SVG) PRO
- Lesson 17: Conclusion PRO
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.
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.
Whether or not you are familiar with SASS, you will have noticed that the files we use for styling in Ionic projects are
.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