Using SASS with user-specified colors

Question

I\'m building a website with Rails 3 that\'ll let users have profiles with different layouts and color schemes. I\'m already using SASS, and the variables would be invaluabl

Answer 1

Alright I dug into the Sass docs and it looks like it would be possible to do using their functions, but it seems like it'd be overly complicated and introduce problems later anyways.

The best way I have found to do this is to generate the user-specific template when they update their settings. This works better anyways, as a request is never delayed while waiting on the parser.

# unless cached_copy_exists
template = %Q{
  @import '/path/to/color_scheme';
  @import '/path/to/layout';
}

output = Sass::Engine.new(template, :syntax => :scss).render

# output rendered CSS to file for inclusion in HTML template

In order to allow custom colors, user-input could be assembled into SASS css variables in a string and prepended to the template file being passed to the Sass parsing/rendering engine.

Update:

Per request, here's a more fleshed-out example of how this works, focusing just on using Sass variables and a pre-coded Sass stylesheet (simplified to isolate this specific problem):

# config/routes.rb
resources :stylesheets, only: [:show]

# app/controllers/stylesheets_controller.rb
class StylesheetsController < ApplicationController
  layout nil

  def show
    styles = Stylesheet.find(params[:id])
    base_stylesheet_path = Rails.root.join('app', 'assets', 'profile.scss')

    # Build the string of SCSS we'll pass to the Sass rendering engine
    @sass = <<-SASS
      #{styles.to_sass}
      @import "#{base_stylesheet_path}";
    SASS

    # Cache for long time
    response.headers['Cache-Control'] = "public, max-age=#{1.year}"

    respond_to do |format|
      format.css
    end
  end
end

# app/views/stylesheets/show.css.erb
<%= raw Sass::Engine.new(@sass :syntax => :scss).render -%>

# app/models/stylesheet.rb
class Stylesheet < ActiveRecord::Base
  serialize :variables, JSON

  def to_sass
    # Convert a hash of variables into SCSS
    variables.each_pair.map do |name, value|
      "$#{name}: #{value};"
    end.join("\n")
  end
end

# example for the stylesheet model 
stylesheet = Stylesheet.new
stylesheet.variables[:primary_color] = "#0000ff"
stylesheet.save