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

标签 css ruby-on-rails ruby-on-rails-4 sass

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

房间的设计或 CSS 基于房间参数(颜色 1、颜色 2 等)和一些随机生成的设计特征(字体类型、图像边框等)。保存房间时,这些特征存储在房间模型中。

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

谢谢

最佳答案

您也可以让您的 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 - 如何根据用户输入创建动态 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27447811/

相关文章:

css - 以正确的方式在 WordPress 中排队 IE 条件样式表

ruby-on-rails - 使用 Devise 从 Rails 上的 json api 进行身份验证

ruby-on-rails - 我是否需要在此测试中创建每个对象?

ruby-on-rails - 生产环境缺少 keystore

css - 仅限 Chrome : Fixed Div w/Google Map scrolls when other div scrolls

html - 当 div 超过 100% 时,CSS 会忽略 margin-right

ruby-on-rails - rails 4 多对多通过数据透视表

mysql - 如何更改 ActiveRecord 时区?

javascript - 如何将部分表单的数据传递给 Rails 操作(使用 JavaScript 且不使用嵌套属性)?

html - CSS:立即加载 CSS