How to implement customized SCSS/SASS after creating a project with ionic generator

_my-sweet-directive.scss

/**
 *
 * PATH TO THIS FILE: app/styles/_my-sweet-directive.scss
 *
 * Notice that here we define styles but do not define variables. 
 * Variables should all be defined ahead of time. If we define any
 * variables here, then they will be local to this file, and will
 * not reset the globals.
 **/

my-sweet-directive, .my-sweet-directive {
  background: $calm;
  color: $myPrettyColor;
}

_variables.scss

/** 
 * 
 * PATH TO THIS FILE: app/styles/_variables.scss
 *
 * In this file we're smoothly overriding any ionic variables that have 
 * existing defaults inside the framework variables file. We're also defining
 * our own variables that we can use in our app's components. Essentially we're
 * setting the global variables for our app here.
 * 
 * For a list of the possible variables that you can override, see bower_components/ionic/scss/_variables.scss
 *
 * Note: we add !default to all variables so that they can be overridden later on if need be.
 *
 **/

// Ionic variables to override
$calm: #4cbfeb !default;
$balanced: #8dcb00 !default;

// My own variables to be used in my components, notice that we can also depend on other variables here.
$myPrettyColor: #ffcc00 !default;
$myOtherPrettyColor: lighten($balanced, 20%) !default;

Gruntfile.js

// 
// PATH TO THIS FILE: root of your project
// 
// Edit your Gruntfile.js file's bower install section to exclude ionic's css
// as shown below. This is just a snippet so you need to find this section.
// If you don't do this, then you'll get ionic in CSS precompiled form
// in addition to your custom scss build and everything will break.
 
   // Automatically inject Bower components into the app
    'bower-install': {
      app: {
        html: '<%= yeoman.app %>/index.html',
        ignorePath: '<%= yeoman.app %>/',
        exclude: ['bower_components/ionic/release/css/ionic.css']
      }
    },

main.scss

/**
 *
 * PATH TO THIS FILE: app/styles/main.scss 
 *
 * This includes all variables. We put them all (both ionic overrides and 
 * our own variables) in one file so it is easy for anyone who @includes 
 * our scss to locate and edit our variables.
 *
 **/

@import "_variables";

/**
 *
 * This includes the SASS/SCSS version of the ionic framework so that we can 
 * customize it by overriding it's variables. To use this we need to make sure
 * that the CSS version is not included in app/index.html
 *
 **/

@import "../../bower_components/ionic/scss/ionic";

/**
 *
 * These are the actual components of our apps that consume variables. We can
 * override ionic's own styles here or add additional styles of our own.
 *
 **/
@import "_my-sweet-directive";
@import "_my-other-sweet-directive";

Thanks for posting. This helped me out a lot!