Les CSS : vers LESS

CSS est un système purement déclaratif textuel pour indiquer les présentations.
Mais celui-ci n’offrant aucune possibilité de globalisation ou d’abstraction, il faut décrire toutes les lignes de styles, avec répétition des valeurs communes...
et donc la "factorisation" [1] des constantes descriptives de couleurs de polices, ou de fonds, pour garder une harmonie de palette dans votre charte graphique, est actuellement impossible !

Pas tout-à-fait, car ce problème commun à tous les Webmestres pourrait avoir une solution : LessCSS !

Article publié le 22 juillet 2014, et actualisé en juillet 2016


Dans la meme lignée [2] que ZPIP, seconde distribution de squelettes à laquelle il est de plus en plus associé, ce concept reprend les mêmes idées de factorisation.

L’ambition de cette page n’est que de centraliser/mémoriser les informations échangées, en particulier sur IRC à titre d’archive...
Page en travaux


 Quelques liens de documentation existante

- rappel des notions de base (Spip 1.9 de 2007, mais tout n’a pas changé... preuve qu’il s’agit d’un sujet récurrent !!) https://contrib.spip.net/Analyse-de..., https://contrib.spip.net/Comment-an... et https://contrib.spip.net/Variations..., et de façon plus ’visuelle’ https://contrib.spip.net/Colorier-l...
- les efforts de Spip-Contrib avec deux orientations https://contrib.spip.net/Squelettes pour la présentation des données lues complété par https://contrib.spip.net/Themes pour surcharger uniquement l’apparence [3]
- un mot-clé mot 194 de Contrib pour retrouver des Rubriques :
- la démarche d’intégration de site Web illustrée : un premier exemple https://contrib.spip.net/Arborescen... complétée par https://contrib.spip.net/Reglage-de...
problème : possibilités limitées, statiques, car on reste au niveau du WebMestre travaillant sur les squelettes !
- également, un plugin propose de compléter les feuilles de styles écrites https://www.paris-beyrouth.org/tuto....

Pour aller plus loin, il faut faire appel à des traitements appliqués à la génération automatique de feuilles de styles, en fonction de paramètres factorisés : c’est là qu’interviendra https://lesscss.org/

 Less et SPIP

La premiere explication à lire est fournie par Romy, avec la mise-à-jour sur le site officiel des plugins, et le code source.

On consultera l’introduction LESS, ou celle proposée par OpenClassRooms...

 Surcharges des feuilles LESS

Le dossier bootstrap2spip/ contient des feuilles de style LESS qui surchargent celles de BootStrap. Voyons un exemple concret avec la feuille alerts.less :

/* importer la feuille d'origine de BootStrap */
@import "bootstrap/css/alerts.less";
/* Ajout des classes info, success, warning, error utilisées dans SPIP */
.info {.alert; .alert-info;}
.success {.alert; .alert-success;}
.warning {.alert;}
.error {.alert;.alert-error}

Ici on voit que la surcharge pour SPIP utilise complètement le fichier natif de BootStrap en lui ajoutant simplement quelques définitions qui héritent de BootStrap. C’est le cas de la plupart des surcharges du dossier bootstrap2spip/ à l’exception de la typographie complètement reprise de SPIP.


Maintenant, à l’occasion de SPIP 3, Cerdic intègre

cerdic :
j’utilise less comme base, et pour faire les declinaisons
et apres je les compile en statique
pour que ça tourne sans less
et la base c’est juste une adaptation de basecss de tetue
en less
Z il utilise #CSS
donc ça prendra ton grid.less
c’est l’astuce de la balise #CSS
il remplace grid.css par grid.less s’il existe
avec zpip-less

Mais Ce n’est pas (encore) documenté/expliqué, donc....
- où trouver les bonnes sources ?

Framework CSS : Less, Compass, SASS
Août 2013

Les framework CSS permettent de gérer ses feuilles de style beaucoup plus efficacement en évitant de dupliquer du code.

Le langage CSS (utilisé pour mettre en page une page web HTML) est assez limité au niveau de sa syntaxe. En effet, une feuille de style n’est rien d’autre qu’une succession de sélecteurs CSS auxquels on attribue des propriétés CSS comme la couleur de fond, les marges ou la police de caractère. CSS est un langage déclaratif plus qu’un réel langage de programmation, il n’est par exemple pas possible de créer une variable en CSS.

C’est dans ce contexte que sont apparus plusieurs solutions visant à rendre le CSS flux flexible et plus productif, ce sont les framework CSS. Il en existe plusieurs, voici les principaux :
LESS CSS

LESS CSS (https://lesscss.org/) est le framework CSS le plus populaire, il est utilisé par nombre de projets et notamment par le bootstrap de twitter. Pour résumer, LESS ajouter ces fonctionnalités au langage CSS :

Variable CSS
C’est très utile pour déclarer une couleur par exemple. En général le webdesign d’un site internet utilise un jeu de couleurs très limité, qui revient souvent. Si on souhaite changer le thème coloriel, il faut mettre à jour toutes les occurrences de cette couleur, ce qui est long est fastidieux. Grâce à LESS, il suffit de définir une variable pour chaque couleur, et ensuite de référencer cette variable dans les propriétés CSS.
Exemple :

/* Déclaration d’une variable couleur */
@color : #e7e7e7 ;

/* Utilisation de la variable */
div#header background-color : @color ;
#content h1 color : @color ;

Mixins
Elles permettent de réutiliser des blocs de règles prédéfinis. On peut par exemple s’en servir pour gérer les coins arrondis avec border-radius, sans devoir se palucher toutes les règles CSS avec les préfixes navigateur (-webkit, -moz...).
Exemple :

 .coins-arrondis (@radius: 10px){
           -webkit-border-radius: @radius;
              -moz-border-radius: @radius;
               -ms-border-radius: @radius;
                -o-border-radius: @radius;
                   border-radius: @radius;
   }

   div#header{
           .coins-arrondis;
   }

   #content h1{
           .coins-arrondis(20px);
   }

Règles imbriquées
Comme son nom l’indique, cette fonctionnalité sert à imbriquer des sélecteurs pour éviter d’avoir des préfixes à rallonge.
Opération CSS
Il devient possible d’utiliser des opérateurs arithmétiques en CSS pour donner une valeur relative à une propriété. On peut par exemple définir que la largeur de la bordure de tel élément est le triple de la largeur de la bordure de tel autre élément, ou de telle variable.
- Fonction CSS
Il s’agit d’un ensemble de fonctions utiles ajoutées par LESS et qui sert par exemple à modifier à la volée la saturation d’une couleur (et donc d’avoir une couleur relative à une autre), comme pour changer la couleur d’arrière-plan d’un bouton au survol en CSS.

 Comment fonctionne LESS ?

LESS fonctionne à l’aide d’un fichier Javascript less.js qui transforme le code LESS en code CSS natif au chargement de la page. Comme vous pouvez vous en douter, cela peut potentiellement ralentir légèrement le temps de chargement des pages car le navigateur doit exécuter le code less.js pour générer le rendu de la page.

C’est pour cette raison qu’il existe aussi un compilateur less (lessc) qui permet de générer le CSS natif côté serveur. Dans ce cas rassurez-vous, ça n’augmentera pas la charge du serveur, puisque la feuille de style ne doit être recompilée à chaque modification des sources (fichier .less). En général il vaut mieux utiliser cette seconde solution, elle est plus propre bien qu’elle soit aussi plus fastidieuse (surtout lors du développement) puisqu’il faut penser à recompiler à chaque modification. De plus, le compilateur (programme lessc) ne fonctionne que sur Unix (linux et Mac OS), et pas sous windows (qui pourra utiliser SimpLESS).

Ne partez pas, les inconvénients dont je vous parlais ci-dessus n’en sont pas, car il existe une application très utile qui s’appelle SimpLESS et qui est absolument géniale !

 SimpLESS

SimpLESS est un petit logiciel pour Windows et Mac OS qui recompile automatiquement dès que vous modifiez les sources LESS, comme ça le fichier CSS est toujours à jour et vous n’avez plus à vous soucier vous même de la compilation.

Vous pouvez le télécharger sur le site officiel :https://wearekiss.com/simpless.

SASS (Syntactically Awesome Style)...


 Et après...

Evidemment, on pense à LESS pour reprendre l’accès à BootStrap :
- actuellement il y a déja une intégration de BootStrap v2 dans Spipr
- d’où le plugin Less pour Spip (basé sur une bibliothèque .php)

Mais BootStrap est déja en V3 ; et sa V4 quitte LESS pour SCSS !


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Ce mot emprunté aux mathématiques (de Seconde.. ;-)) désigne le principe cher au programmeur ou webmestre intelligemment paresseux, de regrouper sous un seul nom descriptif, l’expression d’une constante (exemple de couleur), ré-utilisée plusieurs fois dans une longue feuille de style...

[2Ces avancées -encore en-cours de développement en, 2011- reprennent les travaux et réflexions initiées en particulier par Auteur : 5384 et article 6809...

[3Effectivement, il n’est pas immédiat de bien comprendre la séparation entre les deux notions :
- l’apparence s’intéresse uniquement aux styles utilisés, les polices, couleurs et enrichissements graphiques..
- la présentation est focalisée sur la structure sémantique de la page, en clair, quelles ont les données extraites et présentées au lecteur dans chaque squelette.

[4Ce mot emprunté aux mathématiques (de Seconde.. ;-)) désigne le principe cher au programmeur ou webmestre intelligemment paresseux, de regrouper sous un seul nom descriptif, l’expression d’une constante (exemple de couleur), ré-utilisée plusieurs fois dans une longue feuille de style...


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 22 juillet 2014, et actualisé en juillet 2016 .

Répondre à cet article