Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Compile Sass with Gulp Turn Sass into CSS, automatically

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Posted by Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Gulp/Sass/Compass

Newbie question:

Is Compass compatible with Gulp in the same way as Sass is on its own?

Thanks!

1 Answer

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

Yes. Just use the gulp-compass npm package instead of gulp-sass.

npm install gulp-compass --save-dev

then be sure to include it in your gulpfile.js:

gulpfile.js 
var gulp    = require('gulp'),
    compass = require('gulp-compass');

gulp.task('styles', function() {
  return gulp.src(['src/scss/**/*.scss'])
    .pipe(compass({
      css: 'html/css',
      sass: 'src/scss',
      image: 'html/images'
    }))
    .pipe(gulp.dest('html/css'))
})
Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Awesome! Thanks so much Colin.

I'm looking forward to trying this out when I finish reviewing this class (this is my 2nd time going through it...so it sticks).