Les feuilles de style deviennent de plus en plus volumineuses, complexes et difficiles à maintenir. C'est là qu'un préprocesseur peut aider : Sass, syntactically awesome style sheets, est un langage d’extension CSS de qualité professionnelle pour écrire du CSS robuste, stable et maintenable. Dans cette formation Simplifier le CSS avec Sass et Scss, on découvre comment écrire du meilleur CSS avec les langages préprocesseurs, qui fournissent : + Des fonctionnalités supplémentaires : variables, Imbrication (nesting), l’héritage et l’extension des règles de style, les fonctions, mixins, les partials, les directives + Des modules intégrés pour augmenter les capacités du CSS Et, pourquoi utiliser les avantages des langages préprocesseurs. Les avantages sont nombreux : + Réutiliser les règles de style sans faire de répétition + Séparer les feuilles de style en modules pour améliorer la lisibilité et maintenabilité de la base de code + Accélérer la productivité en écrivant du CSS plus riche et plus flexible + Déboguer les feuilles de style avec des directives universelles Au programme, ce que nous allons apprendre : # Sass & Scss : les langages préprocesseurs 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 Scss/Sass en CSS. On complète avec un premier exemple d’usage et de compilation. Nous utiliserons le terminal, le paquet npm sass et Scout App, une application gratuite multiplateforme avec une interface graphique riche en fonctionnalités # Travailler avec les fonctions et les modules intégrés de Sass Pour aller plus loin, SASS fournit de nombreux modules intégrés et des fonctions utilitaires prêtes qui contiennent diverses fonctions utiles et quelques mixins qui le rendent facile à utiliser : sass-map, sass-color etc

1. Formation
Simplifier l’usage du CSS
avec Scss & Sass
Une formation
Sandy LUDOSKY

2. Une formation
Introduction
1. Sass & Scss : préprocesseurs CSS
2. Installation, usage & les outils de compilation
3. Apprendre les fondamentaux
4. Les concepts et les techniques avancés
5. Travailler avec les fonctions & les modules intégrés
6. PROJET : créer et maintenir les fichiers de style avec le
système 7-1
Conclusion
Plan de la formation

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

4. Connaissances requises
ReactJS ⚛
Bootstrap

5. Présentation du projet
Une formation
Sandy LUDOSKY

6. Une formation
Projets
1. Démos & travaux pratiques
2. Projet : Bootstrap, Sass et système 7-1
Librairie JS React ⚛
Librairie Bootstrap 5
Librairie Sass

7. Ressources et outils
Une formation
Sandy LUDOSKY

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

9. Une formation
Sandy LUDOSKY
Découvrir les autres langages
préprocesseurs
Sass & Scss

10. Langages préprocesseurs : Sass & Scss
Extension et préprocesseur CSS
2 syntaxes
Sass ( > Ruby )
Scss
Fonctionnalités étendues : functions, mixins,
variables, héritage et extension
Une formation

11. Une formation
Sandy LUDOSKY
Découvrir les avantages
CSS vs. Scss

12. Les avantages
Ajoute des fonctionnalités supplémentaires
Améliore la base du code
Réduit les répétitions du code
Accélère la productivité
Une formation

13. Une formation
Sandy LUDOSKY
Découvrir les autres
langages préprocesseurs

14. Installer Sass sur sa machine
npm install -g sass
Une formation

15. Une formation
Sandy LUDOSKY
Compiler du Scss en CSS

16. Scripts
sass --watch [input] [output]
sass --watch scss/main.scss public/main.css

17. sass --watch scss/main.scss public/main.css
Scss

18. sass --watch scss/main.scss public/main.css
CSS

19. Une formation
Sandy LUDOSKY
Ecrire un premier exemple
Scss en CSS

20. sass --watch [input] [output]
Scripts
sass --watch scss/main.scss public/main.css

21. Une formation
Sandy LUDOSKY
Utiliser les interfaces
graphiques

22. Les interfaces graphiques
Compilation avec interface visuelle
Compilation simple de Scss en CSS
Installation simple et rapide
Une formation

23. Sass GUI

24. Une formation
Sandy LUDOSKY
Définir des variables

25. Scss
$myFont: Helvetic, sans-serif;
$myColor: red;

26. Scss

27. CSS

28. Une formation
Sandy LUDOSKY
Imbriquer des règles
avec Nesting

29. Scss

30. CSS

31. Une formation
Sandy LUDOSKY
Réutiliser les règles
avec @extend

32. .message-shared

33. .message-shared

34. .message-shared

35. Une formation
Sandy LUDOSKY
Faire des opérations
mathématiques

36. Scss

37. CSS

38. Une formation
Sandy LUDOSKY
Appliquer les techniques
avancées

39. Appliquer les techniques avancées
Créer des modules et des partials
Importer et regrouper avec @use et @import
Définir du style réutilisable avec @mixin et @include
Contrôler l’application des règles avec @if et @else
Créer des boucles avec @each et réduire les lignes
de code
Une formation

40. Une formation
Sandy LUDOSKY
Créer des modules CSS
séparés avec les partials

41. _variables.scss (partial)
$base_color: #333;
$primary_color: #0000FF

42. Une formation
Sandy LUDOSKY
Regrouper les modules
@use

43. $base_color: #333;
$primary_color: #0000FF
_variables.scss (partial)

44. @use “_variables”
body {
color: _variables.$base_color;
}
_main.scss

45. Une formation
Sandy LUDOSKY
Importer les modules
@import

46. $base_color: #333;
$primary_color: #0000FF
_variables.scss (partial)

47. @import “./_variables”
body {
color: $base_color;
}
_main.scss

48. Une formation
Sandy LUDOSKY
Réutiliser les règles de styles
@mixin et @include

49. @mixin btn($bg-color, $txt-color){
background-color: $bg-color;
text-color: $txt-color;
&:hover {
background-color:$txt-color;
text-color: $bg-color;
}
}
_mixins.scss (partial)

50. @import “./_mixins
.btn-pink {
@include btn(#000, #FFF);
}
_main.scss

51. @import “./_mixins
.btn-pink {
@include btn(#000, #FFF);
}
@mixin btn($bg-color, $txt-color){
background-color: $bg-color;
text-color: $txt-color;
&:hover {
background-color:$txt-color;
text-color: $bg-color;
}
}
_main.scss

52. Une formation
Sandy LUDOSKY
Réutiliser les règles de styles
@mixin avec paramètres

53. @mixin btn($bg-color, $txt-color){
background-color: $bg-color;
text-color: $txt-color;
&:hover {
background-color:$txt-color;
text-color: $bg-color;
}
}
_mixins.scss (partial)

54. @import “./_mixins
.btn-pink {
@include btn(#000, #FFF);
}
_main.scss

55. @import “./_mixins
.btn-pink {
@include btn(#000, #FFF);
}
@mixin btn($bg-color, $txt-color){
background-color: $bg-color;
text-color: $txt-color;
&:hover {
background-color:$txt-color;
text-color: $bg-color;
}
}
_main.scss

56. Une formation
Sandy LUDOSKY
Contrôler les règles de style
@if/@else

57. @mixin btn($bg-color,$txt-color,$border-radius){
background-color: $bg-color;
text-color: $txt-color;
&:hover {
background-color:$txt-color;
text-color: $bg-color;
}
@if($border-radius){
border-radius: 4px;
}
}
_mixins.scss (partial)

58. @mixin btn($bg-color,$txt-color,$border-radius){
…
@if($border-radius){
border-radius: 4px;
} @else {
border-radius: 0;
}
}
_main.scss

59. @import “./_mixins
.btn-pink {
@include btn(#000, #FFF, true);
}
_main.scss

60. @if($border-radius){
border-radius: 4px;
} @else {
border-radius: 0;
}
button
button
Contrôler les règles de style : @if/@else

61. Une formation
Sandy LUDOSKY
Utiliser les boucles
@each

62. $variables {
black:#000,
white: #FFF
}
_variables.scss (partial)

63. @mixin btn($variables){
@each $key,$value in $variables {
&_{$key} {
background-color: $key;
text-color: $value;
&:hover {
background-color:$value;
text-color: $key;
}
}
}
}
_mixins.scss (partial)

64. .btn {
@include btn($variables)
}
main.scss (partial)

65. .btn-black {
background-color:#000;
text-color:#FFF;
}
.btn-black:hover {
background-color:#FFF;
text-color:#000;
}

66. .btn-white {
background-color:#FFF;
text-color:#000;
}
.btn-white:hover {
background-color:#000;
text-color:#FFF;
}

67. Une formation
Sandy LUDOSKY
Utiliser les boucles
@each- mixin

68. Une formation
Sandy LUDOSKY
Utiliser les boucles
@each - include

69. Une formation
Sandy LUDOSKY
Utiliser les boucles
@each - if/else

70. Une formation
Sandy LUDOSKY
Définir des fonctions
réutilisables

71. @function make-btns() {
@each $key,$value in $variables {
&_{$key} {
background-color: $key;
text-color: $value;
&:hover {
background-color:$value;
text-color: $key;
}
}
}
}
Les fonctions réutilisables

72. @mixin btn($variables)
@function make-btns($variables)
}
Les fonctions réutilisables

73. Une formation
Sandy LUDOSKY
Utiliser les fonctions utilitaires
lighten & darken

74. @lighten($color, $value)
@darken($color, $value)
lighten & darken

75. @lighten(#3498d,20%) (#8bc4ea)
@darken(#3498d,30%) (#124364)
lighten & darken

76. Une formation
Sandy LUDOSKY
Définir des valeurs et des
propriétés avec l’interpolation {}

77. @mixin make-btns() {
@each $key,$value in $variables {
&_#{$key} {
background-color: $key;
text-color: $value;
&:hover {
background-color:$value;
text-color: $key;
}
}
}
}

78. $variables : (
dark: (
background-color: #333;
color: #FFF;
)
light: (
background-color: #FFF;
color: #333;
)
)

79. .theme {
@include make_btns()
}
Scss

80. Css
.theme-dark {
background-color: #333;
color: #FFF;
}
.theme-dark:hover {
background-color: #FFF;
color: #333;
}

81. Css
.theme-light {
background-color: #FFF;
color: 333;
}
.theme-light:hover {
background-color: #FFF;
color: #333;
}

82. Scss
.theme-dark {
background-color: #333;
color: #FFF;
}
.theme-dark:hover {
background-color: #FFF;
color: #333;
}

83. Une formation
Sandy LUDOSKY
Définir des valeurs et des
propriétés avec l’interpolation {}
Version optimisée

84. Une formation
Sandy LUDOSKY
Définir des valeurs et des
propriétés avec l’interpolation {}
Résultats

85. Une formation
Sandy LUDOSKY
Utiliser des modules intégrés
sass:color

86. sass:color
import “sass:color”

87. $success: color.adjust(#1abc9c, $alpha: -0.4);
$error: color.adjust(#e74c3c, $alpha: -0.4);
$warning: color.adjust(#f1c40f, $alpha: -0.4);
sass:color

88. Une formation
Sandy LUDOSKY
Utiliser des modules intégrés
sass:map

89. import “sass:map”

90. $variables : (
dark: (
background-color: #333;
color: #FFF;
)
light: (
background-color: #FFF;
color: #333;
)
)

91. @mixin make-btns() {
@each $key,$value in $variables {
&_#{$key} {
background-color: map-get($key, background-color);
text-color: map-get($key, color);
}
}}

92. .dark-theme {
@include make-btn()
}

93. Une formation
Sandy LUDOSKY
Utiliser d’autres modules
map:merge

94. Une formation
Sandy LUDOSKY
Utiliser d’autre modules
map:set

95. Une formation
Sandy LUDOSKY
Le système 7-1
Suivre le pattern d’architecture CSS

96. Objectifs
Organisation cohérente et significative
Base de code maintenable et réutilisable
Meilleure productivité
Projet performant
Travail collaboratif plus efficace 🧑
💻 👩🏾💻 👨🏽💻 🧑
🏻💻
Gage de réussite des projets à grande échelle 🏆
Une formation

97. Division base de code
Organisation thématique des sous-dossiers
( 📁 / @import)
Modules indépendants réutilisables
(@mixin)
Méthode : le modèle 7-1
Une formation

98. Méthode : le modèle 7-1
📁 base/
📁 components/
📁 layout/
📁 pages/
📁 themes/
📁 abstracts/
📁 vendors/
Une formation

99. 📁 components/
📁 components/_button.scss
Méthode : exemple
Une formation

100. _utils/_variables.scss
$midnight_blue: #34495e;
$sass_color: #CC6699;
$primary_color: $midnight_blue:
$secondary_color: $sass_color:

101. _utils/_mixins.scss
.button($color) {
display: block;
padding: 1rem;
color: $color;
}

102. $button_color : $secondary_color;
.click-to-action {
@extend .button($button_color)
// … custom code
}

103. $button_color : $primary_color;
.close-button {
@extend .button($button_color)
// … custom code
}

104. main.css : CSS compilé
.click-to-action {
display: block;
padding: 1rem;
color: #CC6699;
}
.close-button {
display: block;
padding: 1rem;
color: #34495e;
}

105. Une formation
Sandy LUDOSKY
Projet de démarrage
Télécharger les fichiers sources

106. Méthode : le modèle 7-1
📁 base/
📁 components/
📁 layout/
📁 pages/
📁 themes/
📁 utils/
📁 vendors/
Une formation

107. 📁 components/
📁 components/_button.scss
Méthode : exemple
Une formation

108. "depen dencies": {
"local-web-server": "^5.1.1"
}

109. "scripts": {
"start": "npx ws --spa public/index.html",
"watch": "sass --watch scss/main.scss public/main.css",
…
},

110. "scripts": {
"start": "npx ws --spa public/index.html",
"watch": "sass --watch scss/main.scss public/main.css",
…
},

111. Une formation
Sandy LUDOSKY
Maintenir la base de code
par thème

112. Maintenir la base de code par thème
📁 _base/
📁 _components/
📁 _layout/
📁 _pages/
📁 _themes/
📁 _utils/
📁 _vendors/
📝 main.scss
Une formation

113. Une formation
Sandy LUDOSKY
Découvrir les déclarations
universelles et de niveau supérieur

114. Présentation des déclarations universelles et de
niveau supérieur
@debug
@warn
@error
Une formation

115. Les déclarations universelles et de niveau supérieur
@debug "$clr: #{$color}";

116. Une formation
Sandy LUDOSKY
Bootstrap 5
Utiliser l’API et classes utilitaires Sass

117. Utiliser l’API et les classes utilitaires
Sass
📁 forms/
📁 helpers/
📁 mixins/
📁 utilities/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

118. Installation
https://getbootstrap.com/docs/5.0/getting-
started/download/
Une formation

119. Une formation
Sandy LUDOSKY
Organiser les feuilles de style
en modules réutilisables

120. 📁 forms/
📁 helpers/
📁 mixins/
📁 utilities/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

121. 📁 forms/
📁 helpers/
📁 mixins/
📁 utilities/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

122. 📁 forms/
📁 helpers/
📁 mixins/_xxx.scss
📁 utilities/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

123. Une formation
Sandy LUDOSKY
Enrichir l’API d’utilitaires
Bootstrap 5
navbar

124. Une formation
Sandy LUDOSKY
Enrichir l’API d’utilitaires
Bootstrap 5
botton

125. Une formation
Sandy LUDOSKY
Enrichir l’API d’utilitaires
Bootstrap 5
Résultats

126. Une formation
Sandy LUDOSKY
Créer des thèmes
et des variables globales
Thème par défaut

127. 📁 forms/
📁 helpers/
📁 mixins/
📁 themes/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

128. Une formation
📁 forms/
📁 helpers/
📁 mixins/
📁 themes/_xxx.scss
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …

129. Une formation
Sandy LUDOSKY
Créer des thèmes
et des variables globales
Thème dark

130. 📁 forms/
📁 helpers/
📁 mixins/
📁 themes/
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …
Une formation

131. Une formation
📁 forms/
📁 helpers/
📁 mixins/
📁 themes/_xxx.scss
📝 _stylesheet.scss
📝 _stylesheet.scss
📝 …

132. Une formation
Sandy LUDOSKY
Créer des thèmes
et des variables globales
Thème light

133. Une formation
Sandy LUDOSKY
Conclusion