基于构建的不同 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屋!