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