Używanie SASS z kolorami zdefiniowanymi przez użytkownika

Question

Buduję witrynę z Rails 3, która pozwala użytkownikom mieć profile o różnych układach i schematach kolorów. Jestem już przy użyciu Sass, a zmienne byłaby nieoceniona jeśli mogę zrobić coś takiego ...

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

... gdzie definicja kolorystyka będzie głównie (wyłącznie?) Sass zmienne określające kolory do wykorzystania w układ. Oczywiście nie mogę po prostu połączyć plików SASS lub CSS w ten sposób, będę musiał zaimportować je do SASS.

W jaki sposób mogę importować pliki SASS do analizatora składni dynamicznie w czasie żądania, a następnie buforować powstałe pliki CSS do wykorzystania później?

Zastanawiałem się nad pójściem na brzydką ścieżkę budowania każdej możliwej kombinacji przy wdrażaniu, ale to nadal pozostawia mnie w zawieszeniu, jeśli chcę pozwolić użytkownikom ustawić własne kolory w przyszłości. Wydaje się, że taki niski owoc z SASS może być równie dobrze wdrożony.

Answer 1

W porządku, zagłębiłem się w dokumentację Sass i wygląda na to, że byłoby możliwe korzystanie z ich funkcji, ale wydaje się, że byłoby to zbyt skomplikowane i mimo wszystko później wprowadzać problemy.

Najlepszym sposobem, jaki udało mi się to zrobić, jest wygenerowanie szablonu specyficznego dla użytkownika po aktualizacji jego ustawień. To działa lepiej, ponieważ żądanie nigdy nie jest opóźnione podczas oczekiwania na analizator składni.

# 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 

W celu umożliwienia niestandardowe kolory, łatwość wejścia mogą być montowane w Sass zmiennych css w ciąg i dołączany do pliku szablonu jest przekazywany do parsowania Sass/silnik renderowania.

Aktualizacja:

Na życzenie, tutaj jest bardziej uregulowana out przykład, jak to działa, skupiając się tylko na wykorzystaniu zmiennych Sass i wstępnie zakodowany Sass stylów (uproszczony odizolować ten 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