4

Is it possible to specify a variable within SASS from the GruntFile.js prior to compiling with Grunt-contrib-sass?

For example, if absolute paths were required in the CSS the path could be defined by the Gruntfile based on a dev build or a deploy build.

For those familiar with LESS (https://github.com/gruntjs/grunt-contrib-less), this would be a SASS equivalent to LESS' modifyVars.

Example GruntFile

...
sass: {
    deploy: {
        vars: {
           absolute: "http://www.example.com/"
        }
    },
    dev: {
        vars: {
            absolute: "/local_path/"
        }
    }
}
...

Example SASS

.element {
    background-image: url("#{absolute}image.jpg");
}
Jason
  • 4,079
  • 4
  • 22
  • 32
  • Wondering if you found your way around this? I'm trying to kludge together some in place text replacement, and then revert it.. but it is... very kludgy – Damon Apr 17 '15 at 03:14

1 Answers1

2

The Grunt task from my understanding just runs the Sass preprocessor. It does not do anything additional beyond that. You cannot pass variables from the gruntfile to the actual SASS and expect it to work. You can potentially use Compass to set a function that creates an environment variable and based off of that value you can create a SASS mixin that changes the path based off of that environment. As shown in this answer Different SASS/Coffeescript Variable Values Based on Build.

You can then set up the configuration Grunt file configuration as such.

sass: {
    deploy: {
        options: {
            environment: "production"
        }
    },
    dev: {
        options: {
            environment: "development"
        }
    }
}
Community
  • 1
  • 1
Jon
  • 2,456
  • 21
  • 28
  • 1
    A valid answer, however, I would prefer to avoid Compass as it is a lot of overhead for such a simple task (i.e. I do not use the other features of Compass). – Jason Nov 04 '14 at 16:55