Sur cette page

• fingerprint
• minify
• minify_css
• minify_js
• scss_to_css
• to_css
• inline
• dataurl

CSS, JavaScript et traitements

Cecil fournit des filtres Twig pour compiler du Sass, minifier, ajouter une empreinte, intégrer ou embarquer (sous forme d’URL de données) les assets CSS et JavaScript.

fingerprint

Ajoute une empreinte (hash) du contenu du fichier à son nom.

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

Exemple :

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

minify

Minifie un fichier CSS ou JavaScript.

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

Exemples :

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

minify_css

Minifie une chaîne CSS.

{{ variable|minify_css }}

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

Exemples :

{% set styles = 'du CSS ici' %}
{{ styles|minify_css }}

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

minify_js

Minifie une chaîne JavaScript.

{{ variable|minify_js }}

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

Exemples :

{% set script = 'du JavaScript ici' %}
{{ script|minify_js }}

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

scss_to_css

Compile une chaîne Sass en CSS.

{{ variable|scss_to_css }}

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

Alias : sass_to_css.

Exemples :

{% set scss = 'du SCSS ici' %}
{{ scss|scss_to_css }}

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

to_css

Compile un fichier Sass en CSS.

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

Exemple :

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

inline

Affiche le contenu d’un asset.

{{ asset(path)|inline }}

Exemple :

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

dataurl

Renvoie l’URL de données (data URL) d’un asset (ou d’un chemin).

Les images matricielles sont réencodées avec l’option assets.images.quality ; les autres fichiers (y compris SVG) sont encodés tels quels en Base64.

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

Exemple :

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