SASS'ı kullanıcı tarafından belirlenen renklerle kullanma

Question

Kullanıcıların farklı düzenler ve renk şemaları içeren profillere sahip olmasını sağlayacak şekilde Rails 3 ile bir web sitesi yapıyorum.

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

... renk düzeni tanımlama öncelikle (tamamen?) Nerede olacağını ... kullanılacak renkleri belirterek SUKDÖ değişkenleri zaten Sass kullanıyorum ve böyle bir şey yapabileceğini eğer değişkenler çok değerli olacaktır düzeni. Açıkçası SASS veya CSS dosyalarını bu şekilde bağlayamıyorum, bunları SASS'e aktarmam gerekecek.

SASS dosyalarını ayrıştırıcıya dinamik olarak istek anında aktarabilir ve daha sonra kullanmak üzere sonuçtaki CSS dosyalarını önbelleğe alabilir miyim?

Dağıtımdaki her olası bileşimin oluşturulmasında çirkin bir rotaya gitmeyi düşündüm, ancak kullanıcıların gelecekte kendi renklerini ayarlamasına izin vermek istesem de beni askıda bırakıyor. SASS ile bu kadar alçakta asılı meyve gibi uygulanabileceği gibi görünüyor.

Answer 1

Tamam Sass belgelerine kazdım ve onların işlevlerini kullanmanın mümkün olabileceğine benziyor, ancak çok karmaşık bir durum gibi görünüyor ve daha sonra sorunlara yol açıyor gibi görünüyor.

Bunu yapmanın en iyi yolu, ayarları güncelleştirdiklerinde kullanıcıya özgü şablonu oluşturmaktır. Bu daha iyi çalışır, çünkü ayrıştırıcıda beklerken bir istek gecikmez. özel renkler izin vermek için

# 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 

, kullanıcı girişi bir dizede SUKDÖ'nün css değişkenlere monte ve render motoru/Sass ayrıştırma geçirilen şablon dosyasına başına eklenecektir olabilir.

Güncelleme:

:

istek Başına

, burada bu sadece Sass değişkenleri ve (bu sorunla izole etmek basitleştirilmiş) önceden kodlanmış Sass stil kullanarak odaklanarak, nasıl işlediğini daha tenli aşımı örnek

# 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