css - Twig 我可以在 CSS 中包含代码吗？

Question

我的这段代码目前无法使用，是否有其他替代方法？

<ul class="sub">
 {% for key, c in categori %}
     <style>
         #nav.{{c.id}}:hover
         {
           background-color: #{{c.color}};
         }
     </style>
        <li class="{{c.id}}">
            <a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....

我遇到了#nav 中的问题。 {{c.id}}

ow.ly/i/3vwNp 这是例子

谢谢!

Answer 1

按照您的 CSS 编写方式，它需要类为 {{ c.id }} 的元素(由 Twig 解析器解释)位于具有 ID nav 的同一元素上，例如

<li id="nav" class="{{ c.id }}">...</li>

您真的不应该在一个页面上有多个具有相同 id 的元素属性，特别是当你这样做时，JavaScript 会发生奇怪的事情。

而不是尝试以编程方式定义您的 {{ c.id }}尽管在风格上，为什么不做这样的事情呢？

<style>
  #nav .item:hover
  {
    background-color: #{{c.color}};
  }
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
  <li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>

您真的应该只将 CSS 放在 <style> 中以任何方式在文档顶部标记，或者作为更好的做法将它们梳理成 .css要包含的资源文件。