compile sass files multiple times with grunt-contrib-concat

Question

EDIT: upon further reflection I believe my question is about grunt-contrib-concat rather than sass.

I have a folder of sass files one of which is called colors.scss

//neutrals
$white: #fff;
$light-gray: #eee;
$gray: #9f9f9f;
$slate: #59595A;
$charcoal: #404041;

$gold: #FFD34E;

//define non-neutral colors by use. These are what would change if our app was whitelabeled.
$bright-accent-color: tint(#FF4849, 0%);
$muted-accent-color: $bright-accent-color;
$dark-accent-color: $bright-accent-color;

$note-color: #FFFAD5;
$bright-warning-color: black; // will this be used in new scheme?
$muted-warning-color: tint(#DB9E36, 20%);

$dark-warning-color: $charcoal;
$light-background-color: #f3f6f9;

$primary-nav-color: #172740; // dark blue
$secondary-nav-color: #263D59; // blue

I would like to produce a dozen sets of compiled css files, of which I would swap out the colors.css file for each compiled set. I'm trying to figure out how to incorporate this into my gruntfile without producing seperate tasks for each one. I would like one task that looks in folder called colors that in turn contains all of the colors.scss files and then for each one does a compilation and puts that compiled set of css files in a folder with the same name as the colors.scss file. The problem is I have no idea where to start. I'm using grunt-contrib-sass currently and I'm able to produce one set of files. My gruntfile looks like this:

    sass: {
        dist: {
            options: {
                style: 'expanded'
            },
            files: {
                'dist/main.css': 'app/css/main.scss'
            }
        }
    },

which works fine for compiling one set, but I want to iterate over the colors files and produce one set for each file found. is this possible? where should I start?

Answer 1

Think I got it. I edited my gruntfile with the following modules: sass, concat, and copy.

In summary, I concat the specific brand scss file to the main scss file and then copy all of the support files to a sass folder in the dist directory. Then I run sass on the concat'd files and output the final css files to the dist css folder.

Heres the configuration:

module.exports = function(grunt) {
    'use strict';
    var sassFiles = [];
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.registerTask('default', ['concat', 'copy:sass', 'sass']);
    grunt.initConfig({
        concat: (function(){
            var concat = {
                options: {
                    sourceMap: true
                }
            };
            var files = [];
            grunt.file.recurse('app/css/brands/', function(abspath, rootdir, subdir, filename){
                files.push(filename);
            });

            sassFiles = files;
            files.forEach(file => {
                concat[file] = {
                    src: [
                        'app/css/brands/'+file,
                        'app/css/main.scss'
                    ],
                    dest: 'dist/css/sass/'+file
                };
            });

            return concat;
        }()),
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: (function(){
                    var fileObject = {};
                    sassFiles.forEach(file => {
                        var filename = file.split('.')[0];
                        fileObject['dist/css/'+filename+'.css'] =
                            'dist/css/sass/'+file;
                    });
                    return fileObject;
                }())
            }
        },
        copy: {
            sass: {
                files: [
                    { expand: true, cwd: 'app/css', src: '**', dest: 'dist/css/sass/' }
                ]
            }
        }
    });
};