css - 有条件地使用 .less 样式表

Question

我正在努力掌握 Less 并需要帮助。

对于同一个应用程序的不同部分，我有三个样式表。让我们称它们为 1.less、2.less、3.less。我还有一个 shared.less 样式表，其中包含所有三个部分的一些通用样式。

我想通过 require 在主样式表 application.css 中使用这些文件。

如何在 application.css< 中的 1.less、2.less 和 3.less 之间切换?

喜欢

*= 需要 yfu_app/shared.less
*= 在使用应用程序的第一部分时需要 yfu_app/1.less；

*= 需要 yfu_app/shared.less
*= 在使用应用程序的第二部分时需要 yfu_app/2.less 等等。

是否有更好的方法？

编辑

是否可以有条件地@import less 文件到shared.less？

Answer 1

您可以在您的布局 application.html.erb 中添加条件以根据您的应用页面选择样式表

举个例子

<%= stylesheet_link_tag 'application' %>
<% if less_1 %>
  <%= stylesheet_link_tag 'less1' %>   
<% elsif less_2 %>
  <%= stylesheet_link_tag 'less2' %>   
<% elsif less_3 %>
  <%= stylesheet_link_tag 'less1' %>   
<% end %>