Various assembly-based SASS / Coffeescript variables

Question

I am trying to create a build system for an interface that will create different paths in SASS (and possibly Coffeescript) based on where I am deploying. So, for example, I may have an image file that I refer to in my SASS locally in ../images/image.png, and this works fine in my local environment. However, my client has a very closed environment that needs to be done differently (getting their images from a CDN). Thus, the image path may look like ~Some_service_call/images/image.png.

I hope you have some kind of configuration ready for both environments, so when I develop locally, I can either run a command through Terminal, for example, build local packageor build deploy packagethat will automatically recognize which environment I am deploying and use a path based on this . Ideally, I would have a separate JSON configuration file that controls which paths to use for each SASS / Coffeescript variable.

So far I have been starting to peek at Grunt for this, but I'm not sure if this is the right solution. Has anyone ever tried to do this and what worked / didn't work for you?

Answer 1

Use Compass to compile your projects.

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. Ruby ( , JSON), config.rb SASS.

, script, compass compile.

PS Compass CSS .

Answer 2

config.rb, environment gruntfile.js 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"
}