title: How to use SASS in Ionic framework?
body: <p>I am trying to use SASS in my project. I open this link and follow all command. I create a project and setup SASS.
  <a href="http://learn.ionicframework.com/formulas/working-with-sass/" rel="noreferrer">http://learn.ionicframework.com/formulas/working-with-sass/</a></p>
  
  <p>I got this directory structure</p>
  
  <pre><code>   scss
       |
       |—&gt;ionic.app.scss
     www
       |
       |-&gt;css
            |
            |——&gt;ionic.app.css
  </code></pre>
  
  <p>In <strong>index.html</strong> file I imported <strong>ionic.app.css</strong> in <code>style</code> tag. So whatever I change in <strong>ionic.app.scss</strong> file it comes <strong>ionic.app.css</strong> file and reflect in view .</p>
  
  <p>If I add some element in index.html, for example I added Paragraph tag in <code>&lt;ion-content&gt;</code>:</p>
  
  <pre><code>&lt;ion-pane&gt;
      &lt;ion-header-bar class="bar-stable"&gt;
          &lt;h1 class="title"&gt;Ionic Blank Starter&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content&gt;
          &lt;p id=“addp”&gt;Testparagraph&lt;/p&gt;
      &lt;/ion-content&gt;
  &lt;/ion-pane&gt;
  </code></pre>
  
  <p>and added this </p>
  
  <pre><code>#addp{
  background-color:yellow;
  }
  </code></pre>
  
  <p>in <strong>ionic.app.scss</strong>, it added in <strong>ionic.app.css</strong> and reflect In view.</p>
  
  <p>Now what I try to do. I want to add own file <strong>“application.scss”</strong>  in sass folder which should create another file <strong>“application.css”</strong>  in css folder. So whatever I code in  “application.scss” it come in  “application.css” file and it reflect in view. I import <strong>“application.css”</strong> in <strong>index.html</strong> file.</p>
  
  <p>Where I write this code so I to generate this file and watch the my <strong>“application.scss”</strong>  file.</p>
  
  <p>When I run ionic server and I change anything in <strong>“ionic.app.scss”</strong> file it reflect on view same time. I need to do same with <strong>“application.scss”</strong>. If I change <strong>“application.scss”</strong> it will reflect on my view .</p>
  
  <p>This my <strong>gulpfile.js</strong></p>
  
  <pre><code>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();
  });
  </code></pre>