creating css using twig

Question

reading symfony documentation about templating I found mention about twig being able to output css files.

how is this used? is it possible to generate dynamic css same way as I generate html?

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

can I render .css.twig same way? where would be this file stored and how could I possibly include it to another html template.

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

Seems to me it might make more sense to change the HTML classes etc. or the template rather than change the (assumed inline) CSS (and indeed, this is not really the purpose of Twig). But yeah sure, you can include a template in another template, it's in the docs you linked to. What issue did you have doing so? — No Results Found
– No Results Found, Commented May 6, 2014 at 21:18

Igor Pantović · Accepted Answer · 2015-04-01 10:59:32Z

8

It certainly is possible. You would do most of things exactly the same as if you would do for html template.

Create file, eg:

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

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

Create 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 route for that action

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

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

Use that css in your layout

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

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

Now, whether or not this is a good idea should be a separate question. There certainly are some cases where this approach is perfectly valid, but there are cases where you can avoid this. Keep in mind that serving CSS file like this is a lot more expensive than serving static CSS file. Furthermore, since it's a CSS file and it's in HEAD section of your response, it will slow down page load time since it will have to fetch CSS file before rendering body itself.

If you do decide to do this be sure to check out caching possibilities you have to make this as fast as possible.

edited Apr 1, 2015 at 10:59

answered May 6, 2014 at 21:25

Igor Pantović

9,2562 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Javad Over a year ago

Very nice. Furthermore, he can also return the rendered view of the css.twig instead of return new Response.

Alexandre Liscia · Accepted Answer · 2016-03-21 17:01:12Z

Actually

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

should be more like this

    /**
     * @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;
    }

Note that I have annotations because I use Symfony 3. But the important thing in my code sample is that for the response I set Content-Type to 'text/css'.

Collectives™ on Stack Overflow

creating css using twig

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related