How to use SASS in Ionic framework?

Question

I am trying to use SASS in my project. I open this link and follow all command. I create a project and setup SASS. http://learn.ionicframework.com/formulas/working-with-sass/

I got this directory structure

   scss
     |
     |—>ionic.app.scss
   www
     |
     |->css
          |
          |——>ionic.app.css

In index.html file I imported ionic.app.css in style tag. So whatever I change in ionic.app.scss file it comes ionic.app.css file and reflect in view .

If I add some element in index.html, for example I added Paragraph tag in <ion-content>:

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
        <p id=“addp”>Testparagraph</p>
    </ion-content>
</ion-pane>

and added this

#addp{
background-color:yellow;
}

in ionic.app.scss, it added in ionic.app.css and reflect In view.

Now what I try to do. I want to add own file “application.scss” in sass folder which should create another file “application.css” in css folder. So whatever I code in “application.scss” it come in “application.css” file and it reflect in view. I import “application.css” in index.html file.

Where I write this code so I to generate this file and watch the my “application.scss” file.

When I run ionic server and I change anything in “ionic.app.scss” file it reflect on view same time. I need to do same with “application.scss”. If I change “application.scss” it will reflect on my view .

This my gulpfile.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

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

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

Answer 1

Ideally your application.scss should have only the variables used by your other custom .scss files, The idea being, you Change one value and it will change the it all the .scss files.

and your gulp process will compile all your files to a minified css file.

Have a look at, ionic scss folder and their variables file

and the variables used in _variables.scss is same as ionic.app.scss. you can have all the variables defined in _variables.scss in ionic.app.scss.

Hope u have an idea on how Ionic does it, so you could follow the same structure

Answer 2

I don't know how to change it in gulp but i opened another terminal and i used sass --watch function(ex: sass --watch scss/application.scss:www/css/application.css), whenever if your doing changes in application.scss it will automatically update in your project.

Answer 3

Change gulp.src('./scss/ionic.app.scss') to gulp.src(paths.sass).

This will automatically build all .scss files in that folder or any subfolder into a corresponding .css file in /www/css/. Your current Gulp file is building ionic.app.css and an ionic.app.min.css, where the second one is minified for the smallest possible file size. It will do the same for any other files. You'll be able to just write /scss/application.scss and have it taken care of.

If you want to save yourself a lot of trouble, you can use this alternative to build all your SCSS files into a single build.css and build.min.css file.

gulp.task('sass', function(done) {
  gulp.src(paths.sass)
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(concat('build.css'))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});