使用具有用户指定颜色的SASS [英] Using SASS with user-specified colors

问题描述

我正在使用Rails 3构建一个网站，让用户拥有不同布局和配色方案的配置文件。我已经在使用SASS，如果我可以做这样的事情，变量将是无价的...

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

...其中颜色方案定义将主要（完全？）SASS变量指定要使用的颜色布局。显然，我不能只是链接SASS或CSS文件像这样，我需要将它们导入SASS。

如何在请求时动态导入SASS文件到解析器中，然后缓存生成的CSS文件以供日后使用？ >

我考虑了在部署时构建所有可能的组合的丑陋路线，但是如果我想让用户在将来设置自己的颜色，那还是让我挂了。

解决方案

好的，我挖掘Sass文档它看起来像是可以使用他们的功能，但似乎它是过于复杂，后来介绍问题无论如何。

我最好的方式发现这样做是为了生成用户特定的模板，当他们更新他们的设置。

 ＃unless cached_copy_exists 
 template = ％Q {
 @import'/ path / to / color_scheme'; 
 @import'/ path / to / layout'; 
} 
 
 output = Sass :: Engine.new（template，：syntax =>：scss）.render 
 
＃输出渲染的CSS文件在HTML模板中
  

为了允许自定义颜色，用户输入可以组装成SASS css变量

更新：

根据请求，这里有一个更好的例子，如何工作，只关注使用Sass变量和预编码的Sass样式表（简化以隔离这个具体问题）：

 ＃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'）
 
＃构建我们将传递给Sass渲染引擎的SCSS字符串
 @sass =<< -SASS 
＃ {styles.to_sass} 
 @import＃{base_stylesheet_path}; 
 SASS 
 
＃长时间缓存
 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样式表< ActiveRecord :: Base 
 serialize：variables，JSON 
 
 def to_sass 
＃将变量的散列转换为SCSS 
 variables.each_pair.map do | name，value | 
$＃{name}：＃{value}; 
 end.join（\\\
）
 end 
 end 
 
样式表模型的示例
 stylesheet = Stylesheet.new 
 stylesheet.variables [：primary_color] =＃0000ff
 stylesheet.save 
  

I'm building a website with Rails 3 that'll let users have profiles with different layouts and color schemes. I'm already using SASS, and the variables would be invaluable if I could do something like this…

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

…where the color scheme definition would be primarily (entirely?) SASS variables specifying the colors to use in the layout. Obviously I can't just link the SASS or CSS files like this, I'll need to import them into SASS.

How can I import SASS files into the parser dynamically at request-time, then cache the resulting CSS files for use later?

I've considered going the ugly route of building every possible combination on deploy, but that still leaves me hanging if I want to let users set their own colors in the future. It seems like such low-hanging fruit with SASS that it might as well be implemented.

解决方案

Alright I dug into the Sass docs and it looks like it would be possible to do using their functions, but it seems like it'd be overly complicated and introduce problems later anyways.

The best way I have found to do this is to generate the user-specific template when they update their settings. This works better anyways, as a request is never delayed while waiting on the parser.

# 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

In order to allow custom colors, user-input could be assembled into SASS css variables in a string and prepended to the template file being passed to the Sass parsing/rendering engine.

Update:

Per request, here's a more fleshed-out example of how this works, focusing just on using Sass variables and a pre-coded Sass stylesheet (simplified to isolate this specific 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   

这篇关于使用具有用户指定颜色的SASS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！