Book Image

Learning Ionic

By : Arvind Ravulavaru
Book Image

Learning Ionic

By: Arvind Ravulavaru

Overview of this book

Table of Contents (19 chapters)
Learning Ionic
Credits
Foreword
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Understanding the Ionic SCSS setup


In this section, we will take a look at how Ionic SCSS is set up.

If you look at the scaffolded project structure, you will see an scss folder, which consists of the ionic.app.scss file. For customizing the default Ionic theme, you should override the variable here, and here only. If you are planning to have multiple themes, I recommend using theme1.scss, theme2.scss, and so on files inside the scss folder.

Do remember that any of the theme files should have the following two lines:

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

In a typical theme file, the first section overrides SCSS variables. The second section loads Ionic core SCSS files; finally we override the generated classes.

The Ionic core SCSS files refer to the following two statements:

$ionicons-font-path: "../lib/ionic/fonts" !default;
@import "www/lib...