SASS Setup and modifications

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Learn more about SASS on their official page: http://sass-lang.com/

In order to enable SASS the following setup should be done:

  • Open Terminal App on your Mac or Windows Command Line (CMD) on you windows machine
  • Browse to the project folder:
    $ cd myApp
  • Run the following command to setup SASS:
    $ ionic setup sass
  • Run the following command to view the theme:
    $ ionic serve

FILES STRUCTURE

  • scss – is where your SASS file are stored.
    • ionic.app.scss – all imports of needed files for the project
    • layout – the app styling is done in this folder
      • _styles.scss – in this file we have overwritten some default styles of Ionic Framework and we have imported the SCSS files for different pages at the bottom
      • _side-menu.scss – in this file we have written the CSS for the side menu
        • pages – this is where the CSS for every single page type is written
    • modules – styling of additional modules, added to the theme, like our Social Sharing Module
    • utilities – SASS Mixins and Variables