如何根据用户输入创建动态CSS

Tar*_*her 6 css ruby-on-rails sass ruby-on-rails-4

用户应该能够在我的Rails应用程序中设计房间(房间是模型).当用户访问myapp.com/room/1房间时,其内容和特定设计被显示.

房间的设计或CSS基于房间参数(color1,color2,...)和一些随机生成的设计特征(字体类型,图像边框,......).保存房间时,这些特征存储在房间模型中.

我不知道如何为每个房间生成特定的CSS.当用户访问myapp.com/room/1我的应用程序时,应为room1构建特定的CSS(或SCSS).应该在哪里(什么控制器)构建CSS?

谢谢

fiv*_*git 15

您也可以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
Run Code Online (Sandbox Code Playgroud)

然后,您需要实现一个要为CSS格式呈现的模板:

/* app/views/rooms/show.css.erb */
.room {
  background-color: <%= @room.color1 %>;
  color: <%= @room.color2 %>;
}
Run Code Online (Sandbox Code Playgroud)

请注意这与常规模板非常相似.您需要确保这会产生有效的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>
Run Code Online (Sandbox Code Playgroud)

请注意,我已经使用content_for了样式表链接标记.我们可以使用它来确保样式表链接标记在布局的头部很好地呈现:

<!-- app/views/layouts/application.html.erb -->
<head>
  <%= yield :stylesheet_includes %>
</head>
Run Code Online (Sandbox Code Playgroud)

当然,您需要自己填写详细信息,但这是解决问题的最合理方法.