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 mixin，根据该环境更改路径。如答案Different SASS/Coffeescript Variable Values Based on Build所示。

然后，您可以设置配置Grunt文件配置。

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

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

1 个答案: