Ionic and SCSS

By default, Ionic is packed with SCSS. Unlike the earlier version, where one had to set up SCSS in a project, in Ionic 2 the theming has become more modular and simpler. There are two levels at which theming can happen:

  • At the platform level
  • At the page/component level

App-level theming is almost always what we need. We would change the colors of our app based on our brand, and since Ionic uses a SCSS map, the colors are inherited directly by the components. Also, we can add, rename, and remove colors as needed. The primary color is the only required color in the map. iOS, MD, and WP colors can be further customized if colors are different per mode.

Page/component-level theming is very helpful if we would like to keep our ...

Get Learning Ionic - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.