Uso de SASS con colores especificados por el usuario

Question

Estoy construyendo un sitio web con Rails 3 que permitirá a los usuarios tener perfiles con diferentes diseños y combinaciones de colores. Ya estoy usando SASS, y las variables sería muy valiosa si podía hacer algo como esto ...

<link src="base_styles.css" rel="stylesheet"> 
<link src="color_schemes/users_choice.css" rel="stylesheet"> 
<link src="layouts/users_choice.css" rel="stylesheet"> 

... donde la definición combinación de colores sería principalmente (en su totalidad?) Las variables SASS que especifican los colores a utilizar en el diseño. Obviamente, no puedo simplemente vincular los archivos SASS o CSS de esta manera, tendré que importarlos a SASS.

¿Cómo puedo importar archivos SASS en el analizador de forma dinámica en el momento de la solicitud, luego almacenar en caché los archivos CSS resultantes para su uso posterior?

He considerado ir por la fea ruta de construir todas las combinaciones posibles en la implementación, pero eso todavía me deja en suspenso si quiero que los usuarios establezcan sus propios colores en el futuro. Parece ser una fruta tan fácil de alcanzar con SASS que podría ser implementada.

Answer 1

Bien He cavado en los documentos Sass y parece que sería posible hacer uso de sus funciones, pero parece que sería demasiado complicado e introducir problemas más tarde de todos modos.

La mejor manera que he encontrado para hacer esto es generar la plantilla específica del usuario cuando actualizan su configuración. Esto funciona mejor de todos modos, ya que una solicitud nunca se demora mientras se espera al analizador.

# 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 

Con el fin de permitir que los colores personalizados, introducida por el usuario podrían ser montadas en variables css SASS en una cadena y antepone al archivo de plantilla que se pasa al análisis Sass/motor de renderizado.

Actualización:

Por la petición, aquí está un ejemplo más carnosa de cómo funciona esto, centrándose sólo en el uso de variables Sass y una hoja de estilo Sass precodificada (simplificado para aislar este problema específico):

# 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