What's on this page

CSS, JavaScript and processing

Cecil provides Twig filters to compile Sass, minify, fingerprint, inline or embed (as data URL) CSS and JavaScript assets.

fingerprint

Adds a hash of the file content (fingerprint) to the file name.

{{ asset(path)|fingerprint }}
{{ path|fingerprint }}

Example:

{{ asset('styles.css')|fingerprint }}

Minifies a CSS or a JavaScript file.

{{ asset(path)|minify }}
{{ path|minify }}

Examples:

{{ asset('styles.css')|minify }}
{{ asset('scripts.js')|minify }}

Minifies a CSS string.

{{ variable|minify_css }}

{% apply minify_css %}
{# CSS here #}
{% endapply %}

Examples:

{% set styles = 'some CSS here' %}
{{ styles|minify_css }}

<style>
{% apply minify_css %}
  html {
    background-color: #fcfcfc;
    color: #444;
  }
{% endapply %}
</style>

Minifies a JavaScript string.

{{ variable|minify_js }}

{% apply minify_js %}
{# JavaScript here #}
{% endapply %}

Examples:

{% set script = 'some JavaScript here' %}
{{ script|minify_js }}

<script>
{% apply minify_js %}
  var test = 'test';
  console.log(test);
{% endapply %}
</script>

Compiles a Sass string to CSS.

{{ variable|scss_to_css }}

{% apply scss_to_css %}
{# SCSS here #}
{% endapply %}

Alias: sass_to_css.

Examples:

{% set scss = 'some SCSS here' %}
{{ scss|scss_to_css }}

<style>
{% apply scss_to_css %}
  $color: #fcfcfc;
  div {
    color: lighten($color, 20%);
  }
{% endapply %}
</style>

Compiles a Sass file to CSS.

{{ asset(path)|to_css }}
{{ path|to_css }}

Example:

{{ asset('styles.scss')|to_css }}

Outputs the content of an Asset.

{{ asset(path)|inline }}

Example:

{{ asset('styles.css')|inline }}

Returns the data URL of an asset (or of a path).

Raster images are re-encoded with the assets.images.quality option; other files (including SVG) are encoded as is in Base64.

{{ asset(path)|dataurl }}
{{ path|dataurl }}

Example:

<img src="{{ asset('icon.png')|dataurl }}" alt="">

← Images CDN providers →

What's on this page