richard87/twig-sass

A Twig extension/function to render inline SASS files for SEO purposes or to render CSS files with easy customizability

twig-sass

A Twig extension/function to render inline SASS files for SEO purposes. You can also use twig variables inside your sass files., _(*1)

Setup:

Add RenderFunction to Twig:, _(*2)

$twig = new Twig_Environment(new Twig_Loader_Filesystem());
$renderFunction = new \Richard87\TwigSass\RenderFunction(
    new \Leafo\ScssPhp\Compiler(),
    new Richard87\NullCache\NullCachePool()
    );
$twig->addExtension($renderFunction);

Or if you are using Symfony, add this to services.yml:, _(*3)

app.sass_compiler:
    class: Leafo\ScssPhp\Compiler

app.twig.sass_renderer:
    class: Richard87\TwigSass\RenderFunction
    arguments: ['@app.sass_compiler','@cache.app']
    tags:
      - { name: twig.extension}

Options

RenderFunction takes 4 arguments: - Leafo\ScssPhp\Compiler: does the actual compilation of your sass file - PSR6 Cache Pool: A PSR6 enabled Cache pool is requried for any useful performance - importDir: The location SCSS should look for libraries, usually where your node_modules are (mine is in web) - sassFormater: How your output should look like. Takes a classname in string format. Can be any of these values: - "Leafo\ScssPhp\Formatter\Expanded" - "Leafo\ScssPhp\Formatter\Nested" - "Leafo\ScssPhp\Formatter\Compressed" - "Leafo\ScssPhp\Formatter\Compact" - "Leafo\ScssPhp\Formatter\Crunched", _(*4)

Usage

Then render inline styles like this:, _(*5)

<style>
    {{ renderSass("styles.scss.twig") }}
</style>

styles.scss.twig:, _(*6)

$brand-primary: #59cc4a;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
@import "node_modules/bootstrap/scss/bootstrap";

Notice that node_modules is inside the web directory, but that can be easily changed with the importRootDir variable., _(*7)

You can also use the included renderSass filter like this:, _(*8)

<style>
    {{ '$brand-primary: #59cc4a;@import "node_modules/bootstrap/scss/bootstrap";'|renderSass }}
</style>

TODO

• Create a Symfony hook that automatically renders *.scss.twig templates
• Write tests