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

2023年10月3日 227次阅读

在使用Grunt-contrib-sass编译之前,是否可以在GruntFile.js中指定SASS中的变量？

例如,如果CSS中需要绝对路径,则可以基于开发构建或部署构建由Gruntfile定义路径.

对于熟悉LESS(https://github.com/gruntjs/grunt-contrib-less)的人来说,这将是一个SASS,相当于LESS的modifyVars.

示例GruntFile

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

示例SASS

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

最佳答案 根据我的理解,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"
        }
    }
}
点赞