Symfony2: Use Twig variable in stylesheet

Question

I include my stylesheet with a normal <link /> tag, but I need/want to access to twig variables from inside the stylesheet. Is this possible? THe only thing I imagine is putting the whole stylesheet into the document inside a <style> tag, but that won't be very pretty ;) .

You can't simply turn a CSS file in a twig file. There are many solutions, depending on the situation. What exactly would you like to do with your CSS ? — Webberig
– Webberig, Commented Jul 27, 2013 at 13:19
You don't need to put the whole stylesheet in a <style> tag, you can also do small css adjustments in a div tag like this: <div style="...">. Still not really pretty, but fast and simple. — BigJ
– BigJ, Commented Mar 18, 2016 at 10:15

Wouter J · Accepted Answer · 2013-07-27 14:02:49Z

Create a stylesheet, for instance styles.css.twig and put the content there. For instance:

.user-color{
    color: {{ user_color }};
}

Now, create a class which renders this file and saves it somewhere:

class TemplateRenderer
{
    protected $basepath;
    protected $templating;
    protected $parameters = array();

    public function __construct($templating, $basepath, $styleseheetpath)
    {
        $this->basepath = $basepath; /* "%kerel.base_path" parameter */
        $this->templating = $templating; /* "twig" service */
        $this->stylesheetpath = $stylesheetpath; /* custom defined parameter */
    }

    public function setParam($id, $value)
    {
        $this->parameters[$id] = $value;
    }

    public function render()
    {
        file_put_contents(
            $this->basepath.'/web/assets/css/styles.css',
            $this->templating->render(
                $this->stylesheetpath,
                $this->parameters
            )
        );
    }
}

Register this class as a service and register it as an after event listener (http://symfony.com/doc/current/cookbook/event_dispatcher/before_after_filters.html ).

From your controller (or from the event config file using method injection), you can call the setParam method to set a variable.

Inside your base html file, you can include this file using it's path (now, web/assets/css/styles.css).

Please note that the code is an example. Some error handling and caching is definitely needed to make this usable in production.

Collectives™ on Stack Overflow

Symfony2: Use Twig variable in stylesheet

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related