Several CSS output with grunt-contrib-compass

Question

I'm using grunt-contrib-compass to process my SCSS files into a single CSS file. Basically, compass considers all the SCSS files matching app/styles/**/*.scss and compile them into .tmp/styles/main.css.

I would like to split this behavior into :

1. app/styles/specific/**/*.scss to .tmp/styles/specific.css
2. app/styles/**/*.scss to .tmp/styles/main.css (ignoring specific)

However, I have no idea how to configure grunt regarding my configuration file which is quite simple :

options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    relativeAssets: true
}

I couldn't figure out any solution especially since the compass documentation states that cssDir and sassDir only allows string as a parameter. Does this has to be done in an other task?

Answer 1

I think you should try grunt-contrib-sass that have internal support for compass:
https://npmjs.org/package/grunt-contrib-sass

from documentation:

compass 
Type: Boolean
Default: false

Make Compass imports available and load project configuration 
(config.rb located close to the Gruntfile.js).

And you can use global patterns of gruntjs:
http://gruntjs.com/configuring-tasks#globbing-patterns

sass: {
 dist: {
  files: [
    {
      src: 'app/styles/specific/**/*.scss', 
      dest:'.tmp/styles/specific.css'
    },
    {
      src: ['app/styles/**/*.scss', '!app/styles/specific/**/*.scss'],    
      dest:'.tmp/styles/main.css'
    }
  ]
 }
}