3

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

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

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

4

2 回答 2

3

使用 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.rbSASS 函数中获取它并传递给它。

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

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

于 2013-04-04T21:39:20.403 回答
0

如果您不想创建 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"
}
于 2015-09-10T23:05:57.970 回答