基于构建的不同 SASS/Coffeescript 变量值

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

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

到目前为止，我已经开始研究 Grunt 的解决方案，但不确定它是正确的解决方案。有没有人尝试过做这种类型的事情，什么对你有用/没用？

使用 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 缩小信息。