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

Question

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

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

到目前为止，我一直在尝试使用Grunt实现这个功能，但不确定它是否是正确的解决方案。有人曾经尝试过这种类型的事情吗？你用过什么方法，有什么效果或没效果？

- David Savage

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压缩以用于生产环境。

- Andrey Mikhaylov - lolmaus

---

这似乎是SASS的一个很好的方法。您知道在编译期间是否有类似的方法可用于CoffeeScript吗？如果有帮助的话，我正在使用Codekit进行编译，但我不知道它是否提供了任何相关功能。 - David Savage

抱歉，我目前还不支持CoffeScript。顺便提醒一下，请别忘了接受答案。如果有关于CoffeeScript的问题，请另外提问。 - Andrey Mikhaylov - lolmaus

Answer 2

如果您不想创建config.rb文件，只需在gruntfile.js中使用选项environment并将其设置为production或development：

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

环境变量将在 file.scss 或 file.sass 文件中可用：

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

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

- Arthur Silva