如何根据用户输入创建动态 CSS
Posted
技术标签:
【中文标题】如何根据用户输入创建动态 CSS【英文标题】：How to create dynamic CSS based on user input 【发布时间】：2015-02-11 09:50:44 【问题描述】：用户应该能够在我的 Rails 应用程序中设计一个房间（房间是一个模型）。当用户访问myapp.com/room/1 时，会显示房间及其内容和具体设计。
房间的设计或 CSS 基于房间参数（color1、color2、...）和一些随机生成的设计特征（字体类型、图像边框、...）。保存房间时，这些特征会存储在房间模型中。
我不知道如何为每个房间生成特定的 CSS。当用户访问myapp.com/room/1 时，我的应用程序应该为 room1 构建特定的 CSS（或 SCSS）。我应该在哪里（什么控制器）构建那个 CSS？
谢谢
【问题讨论】：
店铺设计定义如何？定义了什么样的信息？ 对于那些使用 Rails 编程的人来说，这是一个明确的问题。 【参考方案1】：如果您将控制器设计为使用 json 请求响应 show 操作，您将能够以 json 格式检索 Room 对象的属性
http://localhost.com:3000/rooms/1.json
"id":1,"color1":"black","color2":"green","created_at":"2014-12-15T19:52:21.235Z","updated_at":"2014-12-15T19:52:21.235Z"
在这种情况下，您可以使用 javascript 创建get request，以 JSON 格式检索数据，然后使用该数据来操作 dom。
$.get( "rooms/1.json", function( data )
alert(data);
);
【讨论】：
【参考方案2】：您也可以让您的 RoomsController 响应 CSS 格式以使其正常工作：
# app/controllers/rooms_controller.rb
class RoomsController
def show
@room = Room.find(params[:id])
respond_to do |format|
format.html
format.css
end
end
end
那么你需要实现一个模板来渲染CSS格式：
/* app/views/rooms/show.css.erb */
.room
background-color: <%= @room.color1 %>;
color: <%= @room.color2 %>;
请注意这与常规模板非常相似。您需要确保这会产生有效的 CSS。
您需要确保在用户访问页面时包含样式表。假设用户在访问/rooms/1 时可以浏览他们的房间设计。这将呈现一个 HTML 模板，我们可以定义如下：
<!-- app/views/rooms/show.html.erb -->
<% content_for :stylesheet_includes do %>
<%= stylesheet_link_tag(room_path(@room, format: :css)) %>
<% end %>
<div class="room">
Room Contents Here
</div>
请注意，我在样式表链接标记周围使用了content_for。我们可以使用它来确保样式表链接标签在布局的头部很好地呈现：
<!-- app/views/layouts/application.html.erb -->
<head>
<%= yield :stylesheet_includes %>
</head>
当然，您需要自己填写详细信息，但这是解决问题最合乎逻辑的方法。
【讨论】：
我的 css 规则非常复杂（渲染图表）。我必须写信给scss。有没有办法渲染到像“app/views/rooms/show.css.scss.erb”这样的模板，然后将scss编译成css？以上是关于如何根据用户输入创建动态 CSS的主要内容，如果未能解决你的问题，请参考以下文章