Sass & compass

ionic-v1
1

Hi there,
Can I use compass and sass in my ionic project ? how?
I can run sass in project with $ ionic setup sass but how can I import compass in my project ?
Thank you .

2

install compass and run the command in your command-prompt to build your css… like "compass compile …"
So you would use own compile task instead of the ionic-gulp-task

3

@mohamadreza_gs I wrote a blog article about this sometime ago https://jasonbrown.io/use-sass-in-your-ionic-app-like-a-pro/ it will go through and provide enough detail for you to implement it in your own project

4

@delta98 thanks for your answer

Everytime I do ionic serve it gives me an error:[gulp-sass] file to import not found or unreadable: compass/css3

Here’s my Gulp task according to your article :

gulp.task('sass', function(done) {
    gulp.src('./scss/ionic.app.scss')
       .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);
});

I’ve also donenpm install -g gulp-compass it still doesn’t work.

5

Have you installed ruby and compass?
What does it say when you execute compass -v?

6

@gmarziou yes Compass 1.0.3 (Polaris)

but it does not work in my ionic project and my error is:

[gulp-sass] file to import not found or unreadable: compass/css3
7

Do you use config.rb for compass settings ? What’s in it?

I think you should because this way you could test your settings outside gulp.
If you don’t have one, create one by runnig ‘compass init’ and edit it.

Once you got ‘compass compile’ working, you can get rid of your settings in config.rb by setting them in your gulp task.