Theming up SASS

Ionic has support for SASS (CSS extension language) to create, customize, and maintain CSS. It eases the process of customizing the existing colors and themes of Ionic for specific platforms. Ionic 3 as a default has SASS setup and you will find that inside the theme folder there will be an variable.scss file. In this file we will be doing custom color changes and overriding platform variables. Earlier in Ionic 1x, the application was hooked to the Ionic's precompiled files, which you can find at the www/lib/ionic/css directory, and file resources and paths are linked in index.html. Previously, in Ionic 1x, we used to set up SASS using CLI:

$ ionic setup sass

This used to automatically remove other file paths and uncomment the ionic.app.css files used for SASS styling inside index.html. Now with Ionic 3 we don't have to set up SASS, it comes by default when we start or create an application.

Customizing

Now the basic setup is ready for SASS and also while running ionic serve you will add all custom styling and SASS related changes in all different files for each of the components or pages. Let's start with changing one of the color variables by default present in the variable.scss file:

/*
To customize the look and feel of 
    Ionic, you can override the variables
For example, you might change some of 
    the default colors:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B,
  twitter:    #53ACEB,
  github:     #000000,
  instagram:  #235D8D
);

// Fastest way to change the theme of 
       your Ionic app is to set new value 
       for primary color

You can see that we have added custom colors such as Twitter and GitHub. We can further customize it by supplying base and contrast properties:

$colors: (
  facebook:(
    base: #3b5998,
    contrast: #ffffff
  )
)

You can now use this color key as a property to many components, such as buttons:

<button facebook>Share on Facebook</button>

SASS is really powerful and it speeds up the CSS development process. It acts as a Swiss army knife for CSS, where we can do multiple things with minimum lines of code and then with just some changes we can easily change the entire look and feel of the application. There are so many examples of how we can use SASS, but as we are more into Ionic development, I recommend going through some good SASS documentation and Ionic 3 theming docs once so that detailed information will be provided.