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

Question

在使用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"); 
} 

Answer 1

从我的理解繁重的任务只是执行下面的萨斯预处理。除此之外，它不会做任何其他的事情。你不能将变量从gruntfile传递给实际的SASS，并期望它能够工作。您可以使用Compass来设置一个创建环境变量的函数，并根据该值创建一个SASS混音器，以改变基于该环境的路径。如这个答案Different SASS/Coffeescript Variable Values Based on Build所示。

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

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