How to easily pass a variable into a .sass file?

Question

Inside of a Rails project, there is a variable to say what site we want the Rails app to run as -- for example, for cars, or boats, and there should be a different CSS sprites if it is a car site or a boat site (site logo is inside the sprite). What is a good way to pass this variable's value: "cars" or "boats" into the .sass file so that the .sass file will use the sprite public/images/sprites/sprite-cars.png or public/images/sprites/sprite-boats.png?

One possible way is to use this in an init file in config/initializers

Sass::Plugin.options[:load_paths] = ["#{RAILS_ROOT}/app/views/templates/#{SITE_NAME}/"]

and inside of app/views/templates/cars/ put a _site_variables.sass there and add a line

@import "site_variables"

in the main .sass file. In _site_variables.sass, just have

$site_sprite_path: '/images/sprites/sprites-cars.png'

This works, but it is a lot of work to just pass a variable. Is there a simpler way?

Answer 1

The recommended way to do this is to define a custom Sass function (see the documentation) and use the :custom option to pass in your specific variables.

Answer 2

The Sass documentation describes how to add custom functions and mentions an option :custom for custom configuration variables.

Suppose, for example, you want a function to display the current year. Make a file lib/sass_year.rb containing the following:

require 'sass'
require 'sass/script'

module Sass::Script::Functions
  def year
    Sass::Script::Value::String.new(Sass::Plugin.options[:custom][:year])
  end
end

Then, in some place like environment.rb, include and configure it as follows:

require Rails.root+'lib/sass_year'
require 'sass/plugin'
Sass::Plugin.options[:custom] ||= {}
Sass::Plugin.options[:custom][:year] = Time.now.year.to_s

Now you can use the function within Sass code like this:

div#copyright
  content: "© 2001–#{year()} XYZ Corporation"

Instead of the current year, you could access environment variables or other configuration data. Note that without the to_s you will get a corrupted string, and when debugging make sure to periodically clear out tmp/cache to force regeneration of your stylesheet.