Thématiser avec Sass : un tutoriel SCSS
Publié: 2022-03-11Le développement de feuilles de style avec Sass, même en utilisant ses fonctionnalités les plus élémentaires, telles que les propriétés d'imbrication ou les variables, permet de gagner un temps précieux et facilite la vie des développeurs front-end. Il n'est pas surprenant que les préprocesseurs CSS aient été largement adoptés comme moyen de facto de créer des styles pour les sites Web et les applications ; nous ne pouvons tout simplement plus vivre sans eux.
Quand il s'agit de thématisation ; c'est-à-dire qu'en modifiant l'apparence de votre site Web tout en conservant sa mise en page, les fonctionnalités de Sass, telles que les mixins ou les fonctions, peuvent donner l'impression de prendre un avion au lieu de marcher ! Dans ce didacticiel SCSS, nous allons créer un thème minimal et utiliser SCSS pour donner à notre programmation CSS des super pouvoirs.
Une approche Mixin de base
Disons que nous avons la disposition suivante :
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> On nous a demandé de créer plusieurs thèmes pour cela. Le thème doit changer de couleur pour tous les conteneurs (y compris le conteneur principal) et le bouton, et le thème sera déterminé par une classe dans le corps, ou il pourrait également s'agir d'un conteneur « externe » :
<body class="theme-1">Construisons un mixin nommé "themable" qui contiendra notre palette de couleurs en paramètres.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Utilisez-le ensuite pour générer nos thèmes :
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); À ce stade, nous avons déjà gagné beaucoup de temps, mais il y a quelques problèmes avec cette approche :
Les thèmes ont normalement beaucoup de propriétés différentes en plus des couleurs. Par exemple, si nous voulions modifier le thème Bootstrap, écrire un mixin suivant la "recette" précédente serait difficile à maintenir et le code difficile à lire. De plus, nous ne suivons pas vraiment les meilleures pratiques de Sass, par exemple, entrer des codes de couleur hexadécimaux directement dans le mixin.
Concevoir un schéma de styles avec Sass Maps
Avec l'aide de cartes, qui sont principalement comme des tableaux indexés clés, nous pouvons créer un ensemble de styles plus sémantique et significatif pour notre thème, qui sera plus facile à maintenir et à comprendre par nos collègues développeurs. Nous pourrions également utiliser des listes , mais, personnellement, je trouve les cartes plus appropriées à cet effet. Les listes n'ont pas de clés alors que les clés sont auto-explicables.
La carte de notre nouvelle approche sera une carte imbriquée :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Si nous voulions accéder à chaque section de notre schéma theme-1 et ses sous-cartes, nous utilisons la directive @each pour parcourir chacune d'elles :
@each $section, $map in $theme-1 $section renverra la clé de la section actuelle et $map renverra la carte imbriquée qui correspond à cette clé.
Ensuite, nous pouvons accéder aux propriétés de chaque carte, disons la propriété background (bg), en utilisant la fonction map-get :
map-get($map, bg)Enfin, en combinant notre nouveau mixin, basé sur notre structure de carte, nous pouvons créer autant de thèmes que nous le souhaitons :
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Notez que nous utilisons également la directive @if pour différencier les propriétés des sections qui ne sont pas des boutons.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }De cette façon, nous pouvons ajouter différentes propriétés pour certaines sections afin de créer des propriétés spécifiques ou même des règles, ou nous pouvons distinguer une clé avec une seule valeur d'une autre avec une carte imbriquée.
Notre thème pourrait également consister en de nombreuses cartes utilisées par plusieurs mixins, appliquées dans différentes parties de notre feuille de style. Tout dépend de la complexité de notre disposition de base et, bien sûr, de notre approche personnelle.
Optimisation supplémentaire
Sass offre des fonctions intégrées utiles pour nous épargner encore plus de travail ; par exemple, le hsl fonctionne comme lighten ou darken pour calculer, par exemple, la couleur d'un bouton lorsqu'on le survole.
On peut modifier le code du bouton pour éclaircir son fond au survol, quelle que soit la couleur de fond d'origine. De cette façon, nous n'avons pas à ajouter une autre couleur pour cet état.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }De plus, avec l'utilisation des modules Sass, notre code peut être encore plus lisible et évolutif ; chaque carte thématique peut être contenue dans un module puis importée dans notre feuille de style principale.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Cela nécessiterait que les modules soient placés dans le projet comme :
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Si vous souhaitez en savoir plus sur l'utilisation de Sass pour SÉCHER votre CSS, son collègue Toptaler Justin Brazeau et passionné de Sass en parle dans son brillant article Sass Mixins: Keep Your Stylesheets DRY .