命令行参数为Sass中的var，用于编译时

Question

对于本地HTML / Sass / Css开发，我们使用libsass（通过Grunt）将我们的Sass文件编译为Css。 Css背景图像URL是根相对的。

萨斯

$dir-img: /img;

.header {
    background-image: url(#{$dir-img}/header.jpg);
}

我们想在编译生产服务器时更改URL以使用CDN：

background-image: url(http://media.website.com/img/header.jpg);

是否存在一些传递命令行参数TO Sass的解决方案，因此Sass可以使用Sass @IF将根相对URL切换为类似URL的硬编码CDN。类似的东西：

命令行：

grunt sass:dist --cdnurl="http://media.website.com/img/"

萨斯

然后Sass检查是否给出了命令行参数：

@if using CDN {
    $dir-img: cdnurl;
@else {
    $dir-img: /img;
}

然后所有IMG网址都会使用CDN网址。

Answer 1

我在libass 命令行选项上找不到任何内容来传递所述变量。去萨斯。

但最终想出了我自己的工作版本！ 让Grunt写一个Sass配置部分。

如果您已经在使用Grunt和Sass，那么非常简单。我们已经在我们的暂存（测试）服务器上安装了NodeJS和Grunt-cli。

Sass setup

在Sass中，我们已经使用了一个（更大的）Sass配置文件，该文件包含几个变量，如：

_config.scss

$dir-font: '/assets/assets/fonts';
$dir-htc: '/assets/htc';
$dir-img: '/assets/images';

此配置文件包含更多配置设置，但我已更新这些变量。在此配置文件中：

@import "_sourcepaths";
$dir-font: '/assets/fonts' !default;
$dir-htc: '/assets/htc' !default;
$dir-img: '/assets/images' !default;

请注意@import _sourcepaths.scss的部分内容。这个较小的部分文件由Grunt 生成。 Sass !default;用作后备变量。或者你甚至可能不再需要这些（被Grunt覆盖）。

Grunt设置

在Grunt方面，我添加了一个自定义任务，它只在我们的登台（或测试）-server上执行（例如在构建过程中）。在我们的本地机器上，我们继续使用根相对路径进行本地开发。

Grunt自定义目标配置

module.exports = function(grunt) {
    grunt.initConfig({
        writeSassConfig: {
            options: {
                scss: './assets/scss/partials/_sourcepaths.scss',
                dirFont: '/assets/fonts',
                dirHtc: '/assets/htc',
                dirImg: '/assets/images'
            },
            cdn: {
                //pathprefix: 'http://cdn.website.com'
                pathprefix: grunt.option('pathprefix') || ''
            }
        }
    }
});

示例 cdn 具有硬编码（http://cdn.website.com）或动态（通过grunt.option命令行参数）pathprefix的Grunt目标。请参阅下面的“运行Grunt任务”如何运行它。它还有一个空白的后备|| ''，它实际上将Sass配置文件中的路径重置为根相对URL。

Grunt自定义任务

然后是所需的Grunt任务（用于上面的配置）。这个Grunt任务将Sass部分写入磁盘。

grunt.registerMultiTask('writeSassConfig', 'Write Sass config file to change source paths', function(){
    grunt.config.requires(
        this.name + '.options.scss',
        this.name + '.options.dirFont',
        this.name + '.options.dirHtc',
        this.name + '.options.dirImg',
    );

    // Create Sass vars
    var _thisOptions = this.options(),
        pathprefix = this.data.pathprefix || '',
        contents = "// Generated by Grunt for dynamic paths like a CDN server\n";
        contents += "$dir-font: '" + pathprefix + _thisOptions.dirFont + "';\n";
        contents += "$dir-htc: '" + pathprefix + _thisOptions.dirHtc + "';\n";
        contents += "$dir-img: '" + pathprefix + _thisOptions.dirImg + "';\n";

    grunt.file.write(_thisOptions.scss, contents);
});

Grunt别名任务

这将创建一个自定义链接的工作流，其中两个任务相继运行。 sass:dist是一个常规的Grunt任务，通过grunt-sass（libsass）插件定位。你可能已经在使用它了。

grunt.registerTask('build-sasscdn', 'Generate Sass config for different Sass paths like a CDN server path', function(){
    grunt.task.run(
        'writeSassConfig',
        'sass:dist'
    );          
});

运行自定义Grunt任务

上面Grunt自定义目标中的pathprefix var。，来自grunt.option('pathprefix')，是通过grunt命令行参数提供的：

grunt build-sasscdn --pathprefix="https://cdn.website.com"

此域名可以通过staging（test）-server服务器端脚本语言（如.NET / PHP / Ruby）进行更改。 Sass配置文件_sourcepaths.scss现在由Grunt更改为：

_sourcepaths.scss

$dir-font: 'https://cdn.website.com/assets/fonts';
$dir-htc: 'https://cdn.website.com/assets/htc';
$dir-img: 'https://cdn.website.com/assets/images';

请记住，_sourcepaths.scss是由Sass导入的。然后，Grunt别名任务运行通常的sass:dist目标，该目标只是在Css中重新编译Sass（在登台/测试服务器上） WITH更新的硬编码CDN域名路径。