如何根据布尔值在Rails中创建动态CSS ?

I am creating a "to-do website". Users can log in and generate tasks. Every task has two checkboxes "urgent" and "important" both are boolean values which are related to the task model. Everything works great but I want to change the background color of the tasks depending on which checkbox is checked. So there should be a total of 4 possibilities/background-color styles:

我正在创建一个“要做的网站”。用户可以登录并生成任务。每个任务都有两个复选框“紧急”和“重要”，它们都是与任务模型相关的布尔值。一切都很好，但是我想根据选中的复选框改变任务的背景颜色。所以总共应该有4种可能性/背景颜色:

Task (important: true, urgent: true) - background-color: red;
任务(重要:真实，紧急:真实)-背景色:红色;
Task (important: true, urgent: false) - background-color: blue;
任务(重要:真实，紧急:错误)-背景色:蓝色;
Task (important: false, urgent: true) - background-color: green;
任务(重要:false, urgent: true)—背景色:green;
Task (important: false, urgent: false) - background-color: grey;
任务(重要:错误，紧急:错误)-背景色:灰色;

Question:

问题:

How can I achieve 4 different background-color styles depending on the urgent and important boolean value of a task?

如何根据任务的紧迫和重要的布尔值实现4种不同的背景颜色样式?

1 个解决方案

#1

In your view:

在你的观点:

<% if task.important and task.urgent %>
  <div class="background-color-red">
    ...
  </div>
<% elsif task.important and !task.urgent %>
  <div class="background-color-blue">
    ...
  </div>
<% elsif !task.important and task.urgent %>
  <div class="background-color-green">
    ...
  </div>
<% elsif !task.important and !task.urgent %>
  <div class="background-color-grey">
    ...
  </div>
<%end%>

Then you can define the background-color in your css file with the classs above.

然后，您可以使用上面的classs在css文件中定义背景色。

#1