4

I have a compass task running on grunt which produces a compiled base.css file and also a number of page specific css files. The base.scss @imports a _settings.scss partial which dictates some global setup for all files.

compass: {
    theme: {
        options: {
            sassDir: '/sass',
            cssDir: 'css',
            fontsPath: 'css/fonts',
            imagesPath: 'img'

        }
    }
}

I want to be able to call the compass task multiple times but each time somehow stipulate that a different settings file is imported in base.scss and a uses different cssDir for the output. Is this achievable?

I have tried to use the approach below involving essentially adding to compasses config.rb (via raw) in two different compass tasks. Each task includes a different import path to a directory containing a settings file. This settings file is then picked up as an @import settings.scss at the top of my base.scss.

compass: {
    theme: {
        options: {
            httpPath: '/',
            sassDir: '/sass',
            cssDir: 'css',
            raw: 'add_import_path  "/sass/theme"'

        }
    },
    theme2: {
        options: {
            httpPath: '/',
            sassDir: '/sass',
            cssDir: 'css',
            raw: 'add_import_path  "/sass/theme2"'

        }
    }
}

This seems to work and although it feels like a hack it's the closest I've got to a working solution. It seems like there should be a way to do this but so far the solution has alluded me.

I'm now wondering if I can use registerTask() to create the functionality I need in approach something like the one I found here:

Programmatically pass arguments to grunt task?

Community
  • 1
  • 1
Mike Rifgin
  • 10,409
  • 21
  • 75
  • 111
  • I've searched and searched for a decent solution to this but it doesn't seem like this is currently possible using grunt. One approach I have considered is to have the settings partials in two separate directories and then when a change to any sass file occurs copy all my core modules and page files to each of these directories, then finally run the compass task on both sets of files...it seems like the long way around and will make the whole process take much longer. Perhaps the only way around this is to speed up on learning node and build my own grunt plugin to deal with the problem. – Mike Rifgin May 21 '14 at 17:33

1 Answers1

1

Your current configuration

I guess that the main caveat of the way you are working now is that changing the import path is not working for sharing stuff between themes. A suggestion to this would be to have two non partial files separate.

shared/
  _partial1.scss
  _partial2.scss
  _partial3.scss
  _partial4.scss
  _partial5.scss
  _base.scss
theme1.scss
theme2.scss

The variables that init each theme are in each theme#.scss. Then if you need to deploy this to different folders under the same name like "base.css" you can use another grunt plugin like https://github.com/gruntjs/grunt-contrib-copy, to copy each theme#.css into the theme# folder under the name base.css.

On the theme1.scss the content could be:

$variable1: '';
$variable2: '';
$variable3: '';

@import 'base',
        'partial1',
        'partial2',
        'partial3',
        'partial4',
        'partial5';
fernandopasik
  • 9,565
  • 7
  • 48
  • 55
  • Sorry, not following that. What does "Have the variables imported or embedded into each "theme file" mean exactly? Is a theme file the partials you've listed in the shared directory? – Mike Rifgin May 11 '14 at 16:04
  • The variables that init each theme are in each theme#.scss, I've edited the answer – fernandopasik May 11 '14 at 18:47
  • Thanks for the answer btw. So I use copy to copy a theme#.css in to a directory and rename it a base.css? That's how the answer reads to me. I'm not sure this would work for me. I need the theme vars to be available to the base partial. This has given me and idea though..perhaps I can copy the base partial to a two different directories that both have different theme files in them..then from there I can run my compass task...will that work? – Mike Rifgin May 11 '14 at 21:26
  • The vars can be in the theme file before importing the base and the shared files. Check my edit. – fernandopasik May 12 '14 at 00:29
  • Ah ok. I see now. That'll work nicely for my base.css but it won't work for page specific files. So say i have a home.scss that compiles to home.css but also needs access to the theme vars. How do I cater for that using this approach? I'm not sure this will allow that. – Mike Rifgin May 12 '14 at 12:03