Le développement de feuilles de style avec Sass, même en utilisant ses fonctionnalités les plus élémentaires, comme les propriétés d’imbrication ou les variables, permet de gagner un temps précieux et de faciliter la vie des développeurs frontaux. 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 nous en passer.,
quand il s’agit de thématiser; c’est—à—dire de changer l’apparence de votre site Web tout en conservant sa mise en page, les fonctionnalités de Sass-comme les mixins ou les fonctions-peuvent avoir l’impression de prendre un avion au lieu de marcher! Dans ce tutoriel SCSS, nous allons créer un thème minimal et utiliser SCSS pour donner à notre programmation CSS quelques superpuissances.
Une Base Mixin Approche
disons que nous avons le schéma suivant:
Nous avons été invités à créer plusieurs thèmes pour elle., 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 s’agir également d’un conteneur « externe”:
<body class="theme-1">construisons un mixin nommé « themable” qui contiendra notre schéma de couleurs en tant que paramètres.,
Puis l’utiliser 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à sauvé beaucoup de temps, mais il y a quelques problèmes avec cette approche:
Thèmes ont normalement beaucoup de propriétés différentes à côté 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 Sass—par exemple, entrer des codes de couleur hexadécimaux directement dans le mixin.,
concevoir un schéma de Styles avec des cartes Sass
avec l’aide de cartes, qui sont principalement comme des tableaux indexés par clé, nous pouvons construire 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:
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 en cours, 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 ID= »259024c97a »>directive 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 aussi consister en de nombreuses cartes utilisées par plusieurs mixin, appliquée 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 faire économiser encore plus de travail; par exemple, les fonctions hsl commelighten oudarken pour calculer, par exemple, la couleur d’un bouton en survolant celui-ci.
Nous pouvons modifier le code du bouton pour alléger son arrière-plan lors du survol, quelle que soit la couleur d’arrière-plan d’origine. De cette façon, nous n’avons pas d’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 de modules Sass, notre code peut être encore plus lisible et évolutif; chaque carte de thème 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 en tant que:
/├── _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, Justin Brazeau, un autre Toptaler et un passionné de Sass, en discute sec.