Accueil > SPIP > Programmation SPIP, Développements > SPIP avec des CSS dynamiques grâce au langage LESS
SPIP avec des CSS dynamiques grâce au langage LESS
vendredi 7 octobre 2016, par
Notez cet article
Rappel CSS : Séparer le contenu de la mise en forme rend le développement web plus rapide et facile
Dans l’article Les avantages des CSS on défini les CSS comme suit :
« Les avantages des CSS : Quelle que soit la taille de votre site Web, son design évoluera avec le temps. Parce qu’ils permettent de séparer le contenu de sa présentation, les CSS représentent le moyen idéal pour permettre cette évolution sans avoir à réécrire l’ensemble de vos pages.
En bref ...
Qu’est-ce (que sont) que le(s) CSS ? C’est un système destiné à mettre en forme les contenus de pages Web. La partie CSS d’un document Web se contente de définir les différents styles de textes ou de blocs qui seront utilisés pour la mise en forme tandis que la partie HTML ne contient que le texte encadré de quelques balises. Chaque style CSS se voit attribuer un nom. Pour attribuer l’un de ces styles à un segment de texte particulier, il suffit d’ajouter les attributs « class=nom_du_style » ou « id=nom_du_style » au sein de n’importe quelle balise HTML.
»
Sur developer.mozilla.org on nous présente les CSS comme suit :
« Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps). »
LESS : langage dynamique de génération de feuilles de style
Selon spippourlesnuls.fr : 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 en CSS pure.
En d’autres termes : Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l’héritage avec le langage CSS ? C’est devenu possible grâce au langage LESS (et aux frameworks Sass, xCSS, ...)
Less en résumé
| Auteur | Alexis Sellier |
| Développeur | Alexis Sellier, Dmitry Fadeyev |
| Dernière version | 2.6.1 (4 mars 2016) |
| Typage | Typage dynamique |
| Influencé par | CSS, Sass |
| A influencé | Sass |
| Système d’exploitation | Multiplate-forme |
| Licence | Licence Apache |
| Site web | lesscss.org |
Histoire de Less
Less a été créé en 2009 par Alexis Sellier, plus communément connu sous le nom @cloudhead. A l’origine écrit en Ruby, il a ensuite été porté sur JavaScript.
En mai 2012, Alexis a abandonné le contrôle et le développement de Less à une équipe de base de collaborateurs qui maintenant gèrent, fixent et étendent ce langue.
LESS est un nouveau langage qui permet de créer dynamiquement le style de vos sites. Il est basé en grande partie sur le CSS, vous ne serez pas perdu. Il permet cependant plusieurs choses qui ne sont pas prévues à la base dans les fichiers CSS :
- L’utilisation de variables
- La création de mixins
- La définition de règles imbriquées (héritage)
- La création de fonctions et d’opérations
Les textes et codes ci-dessous sont tirés de l’article Wikipédia LESS (langage).
Variables
LESS autorise l’utilisation de variables. Les variables LESS sont préfixées avec un signe arobase (@). Les variables sont affectées par un deux-points ( :).
Lors de la compilation, les valeurs des variables sont substituées dans le document CSS.
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}La compilation du code LESS ci-dessus donne le code CSS suivant :
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}Mixins
Les mixins permettent d’embarquer des propriétés d’une classe dans une autre classe en incluant le nom de la classe dans les propriétés. En supprimant les répétitions, les mixins permettent d’avoir un code plus court (pendant le développement uniquement,une fois compilé, il redevient aussi long que lors d’un développement « normal ») et plus facile à modifier, au contraire de CSS qui ne supporte pas les mixins et où tout code doit être répété autant de fois qu’il est utilisé.
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
.bordered;
}La compilation du code LESS ci-dessus donne le code CSS suivant :
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}LESS dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions.
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}La compilation du code LESS ci-dessus donne le code CSS suivant :
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}Imbrication (héritage)
CSS supporte l’imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. LESS permet l’imbrication des sélecteurs à l’intérieur d’autres sélecteurs. Ceci rend l’héritage plus clair et les feuilles de style plus courtes.
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}La compilation du code LESS ci-dessus donne le code CSS suivant :
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}Fonctions et opérations
LESS propose les opérations et fonctions. Les opérations permettent l’addition, la soustraction, la division et la multiplication des valeurs et des couleurs. Ceci peut être utilisé pour créer des relations complexes entre les propriétés.
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}La compilation du code LESS ci-dessus donne le code CSS suivant :
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}LESS autorise également l’utilisation d’expressions JavaScript. Elles sont évaluées lors de la compilation du fichier .less en CSS.
Pour aller plus loin
Less et SPIP
- Les CSS : vers LESS
http://spippourlesnuls.fr/?les-css-vers-less,640
- Utiliser LESS dans SPIP
Plusieurs s’empatouillent avec LESS dans SPIP… Voici un petit tuto pour mieux comprendre.
6 septembre 2015, par Romy Têtue
http://romy.tetue.net/utiliser-less-dans-spip
- LESS pour SPIP : Less-CSS (anciennement LESSpip)
Less-CSS est un plugin intégrant facilement le logiciel LESS dans SPIP.
Intégration de l’implémentation php de LESS
5 novembre 2010 – par jeanbaptiste_bourgoin
Introduction à Less
- LESS (langage)
LESS (langage) sur Wikipédia
- Getting started
An overview of Less, how to download and use, examples and more.
http://lesscss.org/
- Bien démarrer avec LESS
Corinne Schillinger, 12 juin 2012
http://letrainde13h37.fr/5/bien-demarrer-avec-less/
- Simplifiez-vous la vie avec LESS
Par Iso, Mis à jour le jeudi 15 janvier 2015
https://openclassrooms.com/courses/simplifiez-vous-la-vie-avec-less
- Des CSS dynamiques grâce au langage LESS
Article par Chok71 (Développeur Web)
Créé le 09 Novembre 2011, mis à jour le 02 Décembre 2012 (79001 lectures)
http://www.alsacreations.com/article/lire/1307-des-css-dynamiques-grace-a-lessPHP.html
- LESS CSS : le langage qui a du style
http://www.lije-creative.com/less-css/
- Less css : Démarrer sereinement avec Less css ?
jeanluc
http://blog.site-web-creation.net/less-css/
- Préprocesseurs CSS : LESS vs Sass
http://blog.soat.fr/2014/07/preprocesseurs-css-less-vs-sass/
- LESS : un langage pour simplifier les CSS
Par Léa Knorr le mercredi 2 mai 2012
https://www.ideematic.com/actualites/2012/05/less/
- Concevoir un site web, faire plus avec LESS
Avr 29 2013 par Laurent Opprecht
https://ciel.unige.ch/2013/04/concevoir-un-site-web-faire-plus-avec-less/
- Concevoir un site web, les frameworks CSS
Oct 23 2012 par Laurent Opprecht
https://ciel.unige.ch/2012/10/concevoir-un-site-web-les-framework-css/
A propos des CSS
- Les avantages des CSS
http://www.rankspirit.com/introduction-css.php
- Séparation du fond et de la forme
https://fr.m.wikipedia.org/wiki/S%C3%A9paration_du_fond_et_de_la_forme
- Les propriétés CSS et comment s’en servir
https://developer.mozilla.org/fr/Apprendre/CSS/Les_propri%C3%A9t%C3%A9s_CSS
[1] Ce 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...
