Préprocesseurs
##############

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/JBsc6aLCaSI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Les préprocesseurs sont des langages qui ajoutent au CSS des fonctionnalités des langages de programmation, comme les variables, fonctions, test et boucles.

Ces langages n’étant pas compatibles avec les navigateurs, il est nécéssaire de les faire traiter par un *processeur* lequel les transforme en CSS. D’où le nom de ces langages, les préprocesseurs.

.. image:: images/schema-preprocesseurs.svg
   :alt: schéma d'un préprocesseur

Il existe de nombreux langages de préprocesseurs, comme ``SCSS/SASS``, ``LESS`` ou ``stylus``.

exemple : SCSS
**************

.. code-block:: scss

   // on défini la variable $couleur
   // et on lui assigne la valeur
   // rouge : 255
   // vert : 0
   // bleu : 0
   // opacité : 1
   $couleur: rgba(255, 0, 0, 1);

   .exemple {
     // couleur du texte
     color: $couleur;

     // couleur de fond : 40% plus lumineux
     background-color: lighten( $couleur, 40% );

     // liseré inférieur : 40% plus sombre
     border-bottom: 2px solid darken( $couleur, 40% );
   }

Donnera en CSS :

.. code-block:: css

   .exemple {
     color: red;
     background-color: #ffcccc;
     border-bottom: 2px solid #330000;
   }