基于构建的不同 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，但不确定它是否是正确的解决方案。有没有人尝试过做这种事情，什么对你有用/没用？

Answer 1

如果您不想创建 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"
}

Answer 2

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