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

问题描述

我试图创建一个构建系统的前端框架，将创建不同的路径在SASS（和可能的Coffeescript）基于我部署到的地方。因此，例如，我可能有一个图像文件，我在本地SASS本地引用 ../ images / image.png ，这在我的本地环境很好。然而，我的客户端有一个非常锁定的环境，必须以不同的方式（从CDN获取他们的图像）。所以他们的图像路径可能看起来像〜Some_service_call / images / image.png 。

我希望做的是为这两个环境准备好一些配置，所以当我在本地开发时，我可以通过Terminal运行一个命令like build local package 或构建部署包，这将自动识别我正在部署的环境并使用基于此的路径。我理想地将有一个单独的配置JSON文件，控制哪些路径用于每个SASS / Coffeescript变量。

到目前为止，我一直在开始研究Grunt，但不知道这是正确的解决方案。

解决方案

使用Compass来帮助您解决这个问题。编译您的项目。

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

 ＃为项目分配一个名称并将其传递给SASS 
 $ environment =development
模块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 。
 
 $ b b 
 PS Compass还允许添加调试信息用于开发和CSS缩小生产。
 
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. 

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. 

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?
解决方案
Use Compass to compile your projects.

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
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"} )
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.

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

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

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