Sur cette page

CSS, JavaScript et traitements

Cecil fournit des filtres Twig pour compiler du Sass, minifier, ajouter une empreinte ou intégrer les assets CSS et JavaScript.

fingerprint

Ajoutez l'empreinte digitale du contenu du fichier au nom du fichier.

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

Exemples :

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

Réduire un fichier CSS ou JavaScript.

{{ asset(path)|minify }}

Exemples :

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

Réduire une chaîne CSS.

{{ variable|minify_css }}

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

Exemples :

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

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

Réduire une chaîne JavaScript.

{{ variable|minify_js }}

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

Exemples :

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

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

Compile une chaîne Sass en CSS.

{{ variable|scss_to_css }}

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

Alias : sass_to_css.

Exemples :

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

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

Compile un fichier Sass en CSS.

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

Exemples :

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

Affiche le contenu d'un Asset.

{{ asset(path)|inline }}

Exemple:

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

Renvoie l'URL de données d'un actif.

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

← Images Fournisseurs de CDN →

Sur cette page