4

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

例如，如果 CSS 中需要绝对路径，则该路径可以由 Gruntfile 基于 dev 构建或 deploy 构建来定义。

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

示例 GruntFile

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

示例 SASS

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

1 回答 1

2

据我了解，Grunt 任务只是运行 Sass 预处理器。除此之外，它没有做任何额外的事情。您不能将 gruntfile 中的变量传递给实际的 SASS 并期望它能够工作。您可以潜在地使用 Compass 设置一个创建环境变量的函数，并根据该值创建一个 SASS mixin，根据该环境更改路径。如这个答案所示，不同的 SASS/Coffeescript 变量值基于 Build。

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

sass: {
    deploy: {
        options: {
            environment: "production"
        }
    },
    dev: {
        options: {
            environment: "development"
        }
    }
}
于 2014-11-04T16:22:08.137 回答