基于Build的不同SASS / Coffeescript变量值

Question

我正在尝试为前端框架创建一个构建系统，该系统将根据我部署的位置在SASS（以及可能的Coffeescript）中创建不同的路径。因此，例如，我可能有一个我在../images/image.png本地SASS中引用的图像文件，这在我的本地环境中工作正常。但是，我的客户端有一个非常锁定的环境，必须以不同的方式完成（从CDN获取图像）。因此，他们的图片路径可能看起来像~Some_service_call/images/image.png。

我希望做的是为两种环境准备好某种配置，所以当我在本地开发时，我可以通过终端运行命令，如build local package或build deploy package自动识别我正在部署的环境并使用基于此的路径。理想情况下，我会有一个单独的配置JSON文件来控制每个SASS / Coffeescript变量使用哪些路径。

到目前为止，我已经开始研究Grunt，但不确定这是正确的解决方案。有没有人尝试做过这类事情，哪些有效/无效？

Answer 1

使用Compass编译项目。

在Compass的config.rb中定义自定义函数：

# Assign a name to the project and pass it into SASS
$environment = "development"
module Sass::Script::Functions
  def environment
    Sass::Script::String.new($environment)
  end
end

此功能将在SASS中可用：

$images-root: ".."
@if environment() == production
  $images-root: "/var/www/static/images"

html
  background-image: url( #{$images-root + "/sexy-lady.png"} )

您可以自定义内衬！例如，您可以将路径传递给SASS。或者您可以使用一些高级逻辑（服务调用，读取JSON）创建单独的Ruby文件，从config.rb请求它并传递给SASS函数。

最后，您编写了一个更新信息的小脚本并运行compass compile。

PS Compass还允许为生产添加用于开发和CSS缩小的调试信息。

Answer 2

如果您不想创建config.rb，只需使用gruntfile.js中的环境选项并将其设置为生产或发展：

compass: {          
            prod: {
                options: {                  
                    environment: 'production'
                }
            },
            dev: {
                options: {
                    environment: 'development'
                }
            }
        }

，环境值将在 file.scss 或 file.sass 文件中提供：

$font-path: "../fonts";

@if compass-env() == 'production'
{
    $font-path: "../assets/fonts"
}