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.