使用树枝创建CSS

Question

阅读关于模板的symfony文档我发现提到了能够输出css文件的twig.

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

例如,当我想显示一些html模板时,我创建了控制器动作,在里面我渲染.html.twig文件,可能会传递一些参数.

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

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

Answer 1

这当然是可能的.你会做大部分事情,就像你为html模板做的那样.

1. 创建文件,例如:

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

2. 创建控制器动作

   // 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. 为该操作创建路线

      # 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文件.

如果你决定这样做,一定要检查缓存的可能性,你必须尽快做到这一点.