css - 使用 Twig 创建CSS

Question

读书symfony documentation about templating我发现提到 twig 能够输出 css 文件。

这个怎么用？是否可以像生成 html 一样生成动态 css？

例如，当我想显示一些 html 模板时，我创建了 Controller 操作，并在内部呈现 .html.twig 文件，可能会向它传递一些参数。

我可以用同样的方式渲染 .css.twig 吗？这个文件将存储在哪里，我怎么可能将它包含到另一个 html 模板中。

我想将所有样式保存在单独的文件中，但其中一些样式在某些情况下会发生变化。例如，现在我根据 Controller 中的计算设置一些 div 的高度，并将结果高度作为参数传递给模板。但我不觉得这是非常 MVC，在 Controller (甚至模型)中有部分表示逻辑。

Answer 1

这当然是可能的。您将做的大部分事情与您对 html 模板所做的完全相同。

1. 创建文件，例如:

   /* src/Acme/MyBundle/Resources/views/somefile.css.twig */
   
   .someclasss {
       background-color: {{ backgroundColor }};
   }
   

2. 创建 Controller 操作

   // src/Acme/MyBundle/Controller/MyStyleController.php
   
   // ...
   public function styleAction()
   {
       // Fetch it from service or whatever strategy you have
       $backgroundColor = '#ff0000';
   
       return $this->render(
           'AcmeMyBundle::somefile.css.twig',
           ['backgroundColor' => $backgroundColor],
           ['Content-Type' => 'text/css']
       );
   }
   
   // ...
   

3. 为该 Action 创建路线

      # src/Acme/MyBundle/Resources/config/routing.yml
   
      css_route:
          path: /some/path
          defaults: { _controller AcmeMyBundle:MyStyleController:style }
          methods: [GET]
   

4. 在您的布局中使用该 css

      {# src/AcmeMyBundle/Resources/views/mypage.html.twig #}
   
      {# ... #}
      <link href="{{ path('css_route') }}" rel="stylesheet">
      {# ... #}
   

现在，这是否是一个好主意应该是一个单独的问题。当然在某些情况下这种方法是完全有效的，但在某些情况下您可以避免这种情况。请记住，像这样提供 CSS 文件比提供静态 CSS 文件要昂贵得多。此外，由于它是一个 CSS 文件并且位于响应的 HEAD 部分，因此它会减慢页面加载时间，因为它必须在呈现主体本身之前获取 CSS 文件。

如果您确实决定这样做，请务必检查缓存的可能性，您必须尽快完成此操作。