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
About the Author
About the Reviewers

The SCSS workflow

Now that we are aware of where and how the Ionic SCSS framework is set up, we will come up with a workflow that we can use while working with SCSS in an Ionic project.

The steps are as follows:

  1. Set up Ionic SCSS.

  2. Open the scss/ file.

  3. Add/update the variables you want to override before you import the Ionic SCSS framework.

  4. Add the required fonts before you import the Ionic SCSS framework.

  5. Add/override pre-defined classes or create new classes after the Ionic SCSS framework is imported.

So, a typical customized looks like this:

// Override or add variables
$positive: teal;
$custom: #aaa;

// add custom button variables
$button-custom-bg: $custom !default;
$button-custom-text: #eee !default;
$button-custom-border: darken($custom, 10%) !default;
$button-custom-active-bg: darken($custom, 10%) !default;
$button-custom-active-border: darken($custom, 10%) !default;

// define the ionic fonts path
$ionicons-font-path: "../lib/ionic/fonts" !default;

// import...