使用带有用户指定颜色的 SASS
Posted
技术标签:
【中文标题】使用带有用户指定颜色的 SASS【英文标题】:Using SASS with user-specified colors 【发布时间】:2011-06-05 01:26:34 【问题描述】:我正在使用 Rails 3 构建一个网站,让用户拥有具有不同布局和配色方案的配置文件。我已经在使用 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 似乎很容易实现,因此不妨实施。
【问题讨论】:
【参考方案1】:好吧,我研究了 Sass 文档,看起来可以使用它们的功能,但它似乎过于复杂,并且无论如何都会在以后引入问题。
我发现最好的方法是在用户更新设置时生成用户特定的模板。无论如何,这会更好,因为在等待解析器时请求永远不会延迟。
# 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 变量,并添加到模板文件的前面,然后传递给 Sass 解析/渲染引擎。
更新:
根据要求,这里有一个更详细的例子来说明它是如何工作的,只关注使用 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')
# 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
【讨论】:
你认为你可以把你的步骤更清楚一点吗?有点菜鸟! @MildFuzz 根据要求,我添加了一个更深入的示例。以上是关于使用带有用户指定颜色的 SASS的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色?
使用带有 Material UI 的自定义主题在文本字段上指定悬停边框颜色