2011-01-07 40 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