2011-01-07 65 views
9

我建立了Rails 3,一個網站使用SASS會讓用戶有不同的佈局和配色方案概況。我已經使用SASS和變量將是非常寶貴的,如果我可以做這樣的事情......與用戶指定的顏色

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

...這裏的配色方案的定義將主要(全部?)SASS變量指定顏色的使用佈局。很明顯,我不能像這樣鏈接SASS或CSS文件,我需要將它們導入SASS。

如何我可以導入SASS文件到分析器動態的請求時,那麼緩存使用後所產生的CSS文件?

我已經考慮過構建每個可能的部署組合的醜陋路線,但如果我想讓用戶在將來設置自己的顏色,仍然會讓我掛起。這看起來像SASS的這樣一個唾手可得的成果,它可能會被實施。

回答

12

好吧,我挖成薩斯文檔,它看起來像有可能利用它們的功能做的,但現在看來似乎會是過於複雜,反正以後帶來問題。

我發現做到這一點的最好辦法是爲當他們更新自己設置用戶特定的模板。無論如何,這會更好地工作,因爲請求在等待解析器時永遠不會被延遲。

# 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 

爲了讓自定義顏色,用戶輸入可以組裝成SASS CSS變量的字符串和預先計劃在模板文件傳遞給薩斯解析/渲染引擎。

更新:

每請求,下面是如何工作的,重點只是使用薩斯變量和預編碼薩斯樣式表(簡化爲隔離這一特定問題)更充實出例如:

# 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 
+4

你認爲你能澄清你的腳步更清晰一點?小菜一碟! – 2012-03-26 11:04:38