基于构建的不同 SASS/Coffeescript 变量值 [英] Different SASS/Coffeescript Variable Values Based on Build

问题描述

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

I am trying to create a build system for a front-end framework that will create different paths in SASS (and possibly Coffeescript) based on where I am deploying to. So for example, I might have an image file I am referencing in my SASS locally in ../images/image.png, and this works fine in my local environment. However, my client has a very locked down environment that has to be done in a different way (getting their images from a CDN). So their image path might look like ~Some_service_call/images/image.png.

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

What I'm hoping to do is have some sort of configuration ready for both environments, so when I'm developing locally I can either run a command via Terminal like build local package or build deploy package that would automatically recognize what environment I am deploying to and use a path based on that. I would ideally have a separate config JSON file that controls which paths to use for each SASS / Coffeescript variable.

到目前为止，我一直在为此研究 Grunt，但不确定它是否是正确的解决方案.有没有人尝试过做这种事情，什么对你有用/没用?

So far I've been beginning to look into Grunt for this, but not sure it's the correct solution. Has anyone ever tried to do this type of thing, and what worked/didn't work for you?

推荐答案

使用 Compass 编译您的项目.

Use Compass to compile your projects.

在 Compass 的 config.rb 中定义一个自定义函数:

In Compass's config.rb define a custom function:

# 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 中可用:

This function will become available in 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 函数.

And you can customize that to your lining! For example, you can pass the paths to SASS. Or you can create a separate Ruby file with some advanced logic (service calls, reading JSON), require it from config.rb and pass to SASS functions.

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

Finally, you write a small script that updates the info and runs compass compile.

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

PS Compass also allows adding debug information for development and CSS minification for production.

这篇关于基于构建的不同 SASS/Coffeescript 变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！