Utilisation de SASS avec des couleurs spécifiées par l'utilisateur

Question

Je suis en train de construire un site web avec Rails 3 qui permettra aux utilisateurs d'avoir des profils avec des mises en page et des couleurs différentes. J'utilise déjà SASS, et les variables seraient inestimables si je pouvais faire quelque chose comme ça

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

où la définition de la palette de couleurs serait principalement (entièrement ?) des variables SASS spécifiant les couleurs à utiliser dans la mise en page. Évidemment, je ne peux pas simplement lier les fichiers SASS ou CSS de cette manière, je dois les importer dans SASS.

Comment puis-je importer des fichiers SASS dans l'analyseur de manière dynamique au moment de la requête, puis mettre en cache les fichiers CSS résultants pour les utiliser ultérieurement ?

J'ai envisagé d'opter pour la solution laide qui consiste à créer toutes les combinaisons possibles lors du déploiement, mais cela me laisse en suspens si je veux permettre aux utilisateurs de définir leurs propres couleurs à l'avenir. Cela semble être un fruit si facile à atteindre avec SASS qu'il pourrait tout aussi bien être implémenté.

Answer 1

D'accord, j'ai creusé dans la documentation de Sass et il semble que ce soit possible de le faire en utilisant leurs fonctions, mais il semble que ce soit trop compliqué et que cela introduise des problèmes par la suite.

La meilleure façon de procéder est de générer le modèle spécifique à l'utilisateur lorsqu'il met à jour ses paramètres. Cela fonctionne mieux de toute façon, car une demande n'est jamais retardée par l'attente de l'analyseur syntaxique.

# 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

Afin de permettre des couleurs personnalisées, les données de l'utilisateur pourraient être assemblées en variables SASS css dans une chaîne et ajoutées au fichier de modèle transmis au moteur d'analyse et de rendu Sass.

Mise à jour :

A la demande, voici un exemple plus détaillé de la façon dont cela fonctionne, en se concentrant uniquement sur l'utilisation de variables Sass et d'une feuille de style Sass pré-codée (simplifiée pour isoler ce problème spécifique) :

# 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