Using Sass in Your Ionic Framework App Like a Pro

Note: We assume you are familiar with Gulp & Sass

Ionic Framework by default uses CSS, but allows you to customise its default values using Sass.

All you need to do is use this handy little command ionic setup sass and you are all set. If you want a more detailed guide go here.

This creates a task in your gulpfile.js for compiling your sass file located at scss/ionic.app.scss.

This is all you really need to get started with Sass. But if you want to actually use Sass to it's full potential with mixins, functions and modules, keep reading.

Get Some of That Real Sassy goodness

Assuming you've setup your Ionic application using the Ionic setup command, you'll have something similar to this:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Ionic uses gulp-sass and has no options passed by default, what I like to do here is add compass support so we'll modify .pipe(sass()) and pass in an object with compass:true - this tells sass to use compass.

You will need the ruby compass library installed and available on your path

Your gulp config will now look like this:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
    	compass: true
    }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

I also like to enable error logging and a quick way to do that is to log directly to the console. So we'll take our Sass config object and add errLogToConsole:true. You should now have something similar to this:

.pipe(sass({
    	compass: true,
        errLogToConsole:true
    }))

Modularity

If you use Sass you will probably enjoy the benefits of using modules and code separation techniques described in SMACSS or BEM.

You might be familiar with Sass-Globbing, saving you from having to manually add every new file to your main.scss - for Ionic you'll use ionic.app.scss.

To enable this in your gulpfile.js you'll need to run npm install --save-dev gulp-sass-bulk-import to get the npm package.

Add var bulkSass = require('gulp-sass-bulk-import'); to the variable list at the top of your gulpfile.js, then you can pipe the function into your sass task. Your config should now look like this:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(bulkSass())
    .pipe(sass({
    	compass: true,
        errLogToConsole:true
        }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Notice I've put the function above our sass() function. This is important as we need to collect all our .scss files before piping them into our sass function.

That's it. You are all set to go.