Les préprocesseurs CSS comme LESS permettent d’optimiser le code et de repousser les limites du CSS, à l’aide de variables, de fonctions et de nouvelles fonctionnalités afin de créer des feuilles de style plus maintenables, versionnables et extensibles. On démarre cette formation en apprenant à configurer son environnement de travail avec Less. On vous montre comment installer Less avec Node.js. Au programme, on apprend : ● Les bases du langage avec les variables, ● La syntaxe imbriquée, ● Les outils graphiques basiques, ● Les inclusions, ● Et les mixins pour réutiliser un ensemble de règles CSS On explique ensuite les techniques avancées du langage Less comme les ruleset, les Guards Mixin, les itérations et avec les boucles. A l'issue de ce cours vidéo sur le préprocesseur Less, vous maîtrisez les fondamentaux et les techniques avancées de ce nouveau langage de programmation, et vous serez capable de coder des pages web en toute autonomie avec ce préprocesseur CSS. Au programme, ce que nous allons apprendre : # Less : les bases du langage On découvre la syntaxe des langages préprocesseurs, les fonctionnalités et les avantages d’écrire du CSS maintenable et réutilisable comme avec un langage de programmation. # Installation, usage & outils de compilation On découvre les différentes options d’installation et les outils pour compiler du Less en CSS. On complète avec un premier exemple d’usage et de compilation. Nous utiliserons le terminal, le paquet npm less et une application multiplateforme avec une interface graphique riche : Application Koala. # Les multiples usage des mixins pour créer des combinaisons ● Les mixins avec les parenthèses ● Les mixins avec les paramètres ● Les mixins avec les namespace ● Les guarded mixins # Travailler avec les fonctions et les modules intégrés de Less Pour aller plus loin, LESS propose une dizaine de fonctions réutilisables pour changer les nuances, tons et luminosité de couleurs, qui nous serviront pour le projet de création de librairie CSS + Projets et travaux pratiques Il s’agit d’une formation au format didacticiel avec plusieurs projets et travaux pratiques. Un projet plus complet sera l’occasion d’appliquer toutes les notions et de consolider vos connaissances. À l'issue de cette formation, vous saurez parfaitement gérer et maintenir votre base de code, ce qui est un gage de réussite pour vos projets futurs. # Projet complet : Créer une librairie CSS Un projet complet, développé en ReactJS, avec une architecture des feuilles de style en plusieurs modules CSS. Le tout est organisé en plusieurs répertoires et fichiers, lesquels sont compilés en un seul fichier. Pour ce projet, nous utiliserons les ressources de la librairie Bootstrap 5, qui fournit une large collection de composants HTML et CSS réutilisables avec des classes prédéfinies et des utilitaires.

1. Une formation
Sandy LUDOSKY
Formation
Simplifier l’usage
du CSS avec Less

2. Une formation
Introduction
1. Simplifier le CSS avec les langages préprocesseurs
2. Installation, usage & compiler les fichiers Less
3. Faire plus avec Less : les bases du langage
4. Plus de combinaisons CSS avec les mixins
5. Aller plus loin avec Less : inclusion, interpolation et les boucles
6. Plus de nuances couleurs avec les fonctions Less
7. PROJET : librairie CSS avec Less
Conclusion
Plan de la formation

3. Une formation
Niveau intermédiaire à avancé
Développeurs professionnels
Intégrateurs web
Public concerné

4. Connaissances requises
ReactJS ⚛

6. Présentation du projet
Une formation
Sandy LUDOSKY

7. Une formation
Projets
1. Démos & travaux pratiques
2. Projets : Librairie CSS avec Less
⚛

8. Ressources et outils
Une formation
Sandy LUDOSKY

9. Visual Studio Code

10. Node.js & npm

11. Beaucoup de CSS

12. Librairies

13. Une formation
Les fichiers téléchargeables 📁
Version de démarrage
Version finale
Ressources

14. Une formation
Sandy LUDOSKY
Les plus de Less
Découvrir le langage

15. Les plus de Less : découvrir le langage
Less : Leaner Style Sheets
Pré-processeur et extension du langage CSS
Fonctionnalités étendues
functions, mixins, variables, imbrication, escaping,
maps ….
Style plus propre, ordonné, réutilisable et
dynamique
Une formation

16. Une formation
Sandy LUDOSKY
Simplifier le CSS avec Less
fonctionnalités et avantages

17. Variables
Mixins
Imbrication
Extend & regroupement de CSS
Merge (combiner du CSS)
CSS Guards
@import
@plugin
Maps (CSS prédéfini et réutilisable)
Une formation
Fonctionnalités

18. Avantages
Moins de code, plus compact et organisé
Compatible sur plusieurs navigateurs
Plus facile et plus rapide
Fonctions et règles CSS réutilisables
Fonctionnalité d’héritage avec extend
Fonctionnalité de merge
Une formation

19. Installation Less
Une formation
npm install less -g

20. Une formation
Sandy LUDOSKY
Découvrir les langages préprocesseurs
Less, Sass et autres

21. Découvrir les langages préprocesseurs : Less, Sass et autres

22. Une formation
Sandy LUDOSKY
Installer avec npm

23. Installation
npm install less -g
less -v

24. Usage
Navigateur (Javascript)
Côté serveur (Node.js)
less [option] <source> <destination>

25. Une formation
Sandy LUDOSKY
Compiler des fichiers less
premier exemple, syntaxe et les options

26. Installation
npm install less -g
less -v

27. lessc [option] <source> <destination>
Usage

28. @color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
background-color: #fff;
color: @color-base;
}
}
Usage : less

29. .class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
background-color: #fff;
color: #2d5e8b;
}
CSS compilé

30. Une formation
Sandy LUDOSKY
Compiler et surveiller
les changements dans les fichiers less

31. less-watch-compiler [option] <source> <destination>
Usage
less-watch-compiler styles/less src main.less

32. Une formation
Sandy LUDOSKY
Utiliser les outils
et interfaces graphiques

33. Koala (Mac et Windows)
http://koala-app.com/

34. Une formation
Sandy LUDOSKY
Définir des variables
dans un seul emplacement

35. // Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);

36. // Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}

37. // Usage
@nice-color:#5B83AD;
#header {
color:@nice-color
}

38. // CSS
#header {
color: #5B83AD;
}

39. Une formation
Sandy LUDOSKY
Imbriquer des règles CSS

40. less
a {
color: blue;
&:hover {
color: green;
}
}

41. CSS
a {
color: blue;
}
a:hover {
color: green;
}

42. Une formation
Sandy LUDOSKY
Créer des sélecteurs
avec l’opérateur “&”

43. .button {
&-ok {
background-color: #1abc9c;
}
&-cancel {
background-color: #3498db;
}
&-custom {
background-color: #333;
}
}

44. .button-ok {
background-color: #1abc9c;
}
.button-cancel {
background-color: #3498db;
}
.button-custom {
background-color: #333;
}

45. Une formation
Sandy LUDOSKY
Etendre et combiner
les sélecteurs
extend

46. pseudo-class :extend(selector)
syntaxe imbriqué & :extend(selector)

47. .a:extend(.b) {}
// the above block does the same thing as the
below block
.a {
&:extend(.b);
}

48. .inline {}
// the above block does the same thing
as the below block
.a:extend(.inline) {}

49. .button-shared{
color: red;
}
a,.button-shared {
color: red;
}

50. .inline {
color: red;
}
nav ul {
.inline;
background: blue;
}

51. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
avec les mixins

52. less
.my-mixin {
color: black;
}
.class {
.my-mixin();
}

53. CSS
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

54. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
mixins avec parenthèses

55. .my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin();
.my-other-mixin();
}

56. .my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

57. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
mixins avec paramètres

58. less
.mixin(@color) {
color: @color;
background: darken(@color, 10%);
border: 1px solid @color;
}
.button {
.mixin(#8e44ad)
}

59. CSS
.button {
color: #8e44ad;
background: #9b59b6;
border: 1px solid #8e44ad;
}

60. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
mixins avec namespace

61. less
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library.my-mixin();
}

62. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
guard mixins

63. .mixin(@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin(@a) when (lightness(@a) < 50%) {
background-color: white;
}

64. .class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

65. CSS
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}

66. Une formation
Sandy LUDOSKY
Combiner les propriétés CSS
variables pour les mixins

67. #theme.dark.navbar {
.colors(light) {
primary: purple;
}
.colors(dark) {
primary: black;
secondary: grey;
}
}

68. .navbar {
@colors:
#theme.dark.navbar.colors(dark);
background: @colors[primary];
border: 1px solid @colors[secondary];
}

69. Une formation
Sandy LUDOSKY
Appliquer des techniques
avancées dans son code

70. Une formation
Appliquer les techniques avancées
@ruleset
diviser et @import
interpolation
itérations et automatisation

71. Une formation
Sandy LUDOSKY
Encapsuler un ensemble
de règles CSS

72. // declare detached ruleset
@detached-ruleset: { background: red; }; // semi-colon is
optional in 3.5.0+
// use detached ruleset
.top {
@detached-ruleset();
}

73. .top {
background: red;
}

74. Une formation
Sandy LUDOSKY
Découper le CSS
en plusieurs fichiers

75. Une formation
Découper le CSS en plusieurs fichiers
plusieurs fichiers simples
plus ordonné, plus gérable et plus flexible
regrouper avec @import

76. Une formation
Sandy LUDOSKY
Importer les fichiers less

77. Une formation
Importer les fichiers less
plusieurs fichiers simples
plus ordonné, plus gérable et plus flexible
regrouper avec @import

78. Importer les fichiers less
// myfile.less
.myclass {
color: blue;
}
.myclass1{
color: red;
}
@import "myfile.less";
.myclass2 {
color: brown;
}

79. .myclass {
color: blue;
}
.myclass1 {
color: red;
}
.myclass2 {
color: brown;
}
CSS compilé

80. Une formation
Sandy LUDOSKY
Importer les fichiers less
avec options

81. Une formation
Importer les fichiers less avec options
reference
inline
less
css
once
multiple
optional

82. @import (reference) "https://[...]/pure.less";
.my-button {
&:extend(.pure-button all);
}
reference
@import (inline) "https://[...]/pure.less";
.my-button {
&:extend(.pure-button all);
}

83. inline
// style.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
@import (inline) "style.css";
.my-button {
color: red
}

84. style.css
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
p {
color: red;
}

85. Une formation
Sandy LUDOSKY
Automatiser avec les boucles
boucles et interpolation

86. @iterations: 5;
.span-loop (@i) when (@i > 0) {
.span-@{i} {
width: ~"@{i}%";
}
.span-loop(@i - 1);
}
.span-loop (@iterations);

87. .span-5 {
width: 5%;
}
.span-4 {
width: 4%;
}
.span-3 {
width: 3%;
}

88. Une formation
Sandy LUDOSKY
Automatiser la création
de sélecteurs

89. Automatiser la création de sélecteurs
@color: #2c3e50;
@repetitions: 50;
.color-palette(@i) when (@i >= 10) {
.midnight-blue-@{i} {
background: lighten(@color, @i * 1%)
}
.color-palette(@i - 10);
}
.color-palette(@repetitions:);

90. Une formation
Sandy LUDOSKY
Contrôler la luminosité
lighten and darken

91. lighten
lighten(@color, @amount);
@color: #2c3e50;
.button {
background: lighten(@color, 20%); 0 => 100%
}

92. CSS
@color: #2c3e50;
.button {
background: #507192;
}
#2c3e50 #507192

93. darken
darken(@color, @amount);

94. Une formation
Sandy LUDOSKY
Manipuler la transparence
fadein and fadeout

95. Manipuler la transparence : fadein and fadeout
fadein(@color, @amount);

96. Une formation
Sandy LUDOSKY
Créer des combinaisons
des couleurs
mix

97. Créer des combinaisons de couleurs : mix
mix(@color1, @color2, @amount);

98. Créer des combinaisons de couleurs : mix
mix(#ff0000, #0000ff, 50%);
#0000ff #800080
#ff0000

99. Une formation
Sandy LUDOSKY
Varier les nuances et saturation
de teintes
spin et hue

100. Varier les nuances et saturation de teintes avec spin et hue
spin(@color, @amount); 0-100%
hue(@hue, @saturation, @lightness); 0-100%

101. Une formation
Sandy LUDOSKY
Créer une librairie
de composants avec less

102. Projet : Librairie CSS avec Less
⚛
Library

103. Visual Studio Code

104. Node.js & npm

105. Beaucoup de CSS

106. Une formation
Les fichiers téléchargeables 📁
Version de démarrage
Version finale
Ressources

107. Une formation
Sandy LUDOSKY
Démarrer le projet
les ressources et les fichiers less

108. Une formation
Les fichiers téléchargeables 📁
Version de démarrage
Version finale
Ressources

109. Créer une librairie de composants avec less
📁 components/
📁 styles/
📁 less/
…
main.less
button.less
…
Une formation

110. Une formation
Sandy LUDOSKY
Automatiser la création
des sélecteurs

111. Une formation
Sandy LUDOSKY
Créer une application
monopage avec less

112. Une formation
Sandy LUDOSKY
Démarrer le projet avec less

113. Une formation
Sandy LUDOSKY
Conclusion