在使用Grunt Contrib SASS编译时指定SASS变量

Question

在使用Grunt contrib SASS进行编译之前，是否可以从GruntFile.js在SASS中指定一个变量？

例如，如果CSS中需要绝对路径，则Gruntfile可以根据开发构建或部署构建来定义路径。

对于那些熟悉LESS的人(https://github.com/gruntjs/grunt-contrib-less)，这将是等效于LESS’modifyVars的SASS。

GruntFile 示例

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

SASS 示例

.element {
    background-image: url("#{absolute}image.jpg");
}

Answer 1

根据我的理解，Grunt任务只是运行Sass预处理器。除此之外，它没有做任何额外的事情。您不能将变量从gruntfile传递到实际的SASS并期望它工作。您可以使用Compass设置一个创建环境变量的函数，并基于该值创建一个SASS混合，该混合可以基于该环境更改路径。如本答案所示，不同的SASS/Coffect根据构建描述变量值。

然后，您可以将配置Grunt文件配置设置为这样。

sass: {
    deploy: {
        options: {
            environment: "production"
        }
    },
    dev: {
        options: {
            environment: "development"
        }
    }
}