Create css using a twig

Question

reading symfony documentation on templates I found a mention that the branch can output css files.

how is it used Is it possible to generate dynamic css the same way I generate html?

for example, when I want to display some html template, I create a controller action, and inside I render the .html.twig file, possibly passing some parameters to it.

Is it possible to make .css.twig in the same way? where this file will be stored and how I can include it in another html template.

I would like to keep all styles in separate files, but some of these styles change under certain conditions. for example, right now I'm setting the height of some divs according to the calculations in the controller, and I'm passing the height of the result as a parameter to the template. but I don’t feel that it is very MVC having some of the presentation logic in the controller (or even the model).

Answer 1

It is certainly possible. You would do most of the things just as you would for an html template.

• Create a file, for example:

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

• Creating a controller action

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

• Create a route for this action.

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

• Use this CSS in your layout.

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

, , . , , , , . , CSS , , , CSS. , CSS HEAD , , CSS , .

, , .

Answer 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'.