使用树枝创建 CSS答案

【问题标题】：creating css using twig使用树枝创建 CSS
【发布时间】：2014-05-06 20:14:35
【问题描述】：

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

这是如何使用的？是否可以像生成 html 一样生成动态 css？

例如，当我想显示一些 html 模板时，我创建控制器操作并在内部渲染 .html.twig 文件，可能会传递一些参数。

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

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

【问题讨论】：

在我看来，更改 HTML 类等或模板可能比更改（假定内联）CSS 更有意义（实际上，这不是 Twig 的真正目的）。但是可以肯定，您可以在另一个模板中包含一个模板，它在您链接到的文档中。你这样做有什么问题？

标签： css symfony twig

【解决方案1】：

这当然是可能的。你会做大部分事情，就像你对 html 模板做的一样。

创建文件，例如：

/* src/Acme/MyBundle/Resources/views/somefile.css.twig */

.someclasss {
    background-color: {{ backgroundColor }};
}

创建控制器动作

// 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']
    );
}

// ...

为该操作创建路线

   # src/Acme/MyBundle/Resources/config/routing.yml

   css_route:
       path: /some/path
       defaults: { _controller AcmeMyBundle:MyStyleController:style }
       methods: [GET]

在布局中使用该 CSS

   {# src/AcmeMyBundle/Resources/views/mypage.html.twig #}

   {# ... #}
   <link href="{{ path('css_route') }}" rel="stylesheet">
   {# ... #}

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

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

【讨论】：

非常好。此外，他还可以返回 css.twig 的渲染视图，而不是 return new Response。

【解决方案2】：

其实

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']
    );
}

应该是这样的

    /**
     * @Route("/css/style", name="style")
     * @param Request $request
     * @return Response
     */
    public function styleAction(Request $request)
    {
        $firstColor = 'rgba(130, 30, 30, 0.9)';

        /** @var Response $response */
        $response = $this->render(':css:style.css.twig', [
            'firstColor' => $firstColor,
        ]);

        $response->headers->set('Content-Type', 'text/css');

        return $response;
    }

请注意，我有注释，因为我使用 Symfony 3。但在我的代码示例中重要的是，对于响应，我将 Content-Type 设置为 'text/css'。

【讨论】：