Comment ce projet SCSS reste organisé à partir d'une carte

Lorsque je travaillais sur la documentation de mon produit, LiveAPI, j'ai commencé à utiliser MkDocs, un générateur de site statique qui produit une documentation propre et professionnelle.

Cependant, j'ai trouvé son design un peu monotone et j'ai décidé d'explorer le projet pour y faire quelques personnalisations.

Ce voyage m'a conduit à une partie intrigante de son architecture : les cartes Sass.

Ce qui a commencé comme une modification occasionnelle s'est transformé en une appréciation plus profonde de la conception réfléchie derrière ce projet.

Dans ce blog, j'explorerai comment les cartes Sass sont utilisées dans le thème Material de MkDocs, en particulier dans ses mixins, et comment elles contribuent à la flexibilité et à l'évolutivité du système de conception. Allons-y !

---

Que sont les cartes Sass ?

Les cartes Sass sont une structure de données clé-valeur dans Sass, semblable aux dictionnaires en Python ou aux objets en JavaScript.

Ils nous permettent de stocker les données associées de manière compacte et de récupérer les valeurs de manière dynamique.

Dans le thème MkDocs Material, les cartes Sass sont utilisées pour définir des points d'arrêt spécifiques à l'appareil pour une conception réactive. Par exemple :

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Cette carte organise les points d'arrêt en catégories (mobile, tablette, écran) et sous-catégories (portrait, paysage, petit, moyen, grand).

Il ne s'agit pas simplement d'une définition statique : c'est l'épine dorsale de la manière dont les comportements réactifs sont générés de manière dynamique.

---

Comment fonctionnent les cartes Sass dans les mixins MkDocs

Le thème utilise une série de fonctions et de mixins pour extraire et utiliser les données de la carte $break-devices. Voici une répartition :

1. Extraction des valeurs de point d'arrêt

La fonction break-select-device parcourt la carte pour trouver la catégorie d'appareil pertinente et récupère les points d'arrêt associés.

Si plusieurs niveaux sont spécifiés (par exemple, portrait mobile), cela approfondit la hiérarchie.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

• @for Loop : Cette boucle s'étend du premier au dernier élément de la liste $device, garantissant que chaque niveau de la hiérarchie est vérifié.
• @if Condition : Ceci vérifie si la valeur actuelle est toujours une carte et continue de creuser si elle est vraie. Sinon, il s'arrête avec un message d'erreur.
• map.get : Une fonction Sass intégrée qui récupère une valeur de la carte à l'aide d'une clé.

2. Création de requêtes multimédias

Dans SCSS, un mixin est un bloc de code réutilisable que vous pouvez définir une seule fois et utiliser dans toute votre feuille de style.

Il aide à garder votre code SEC (Ne vous répétez pas) en vous permettant d'inclure des styles ou de la logique plusieurs fois sans répéter le code.

Par exemple, si vous devez appliquer un ensemble de styles à plusieurs reprises, vous pouvez créer un mixin et le réutiliser partout où cela est nécessaire :

Les mixins break-from-device et break-to-device exploitent cette fonction pour générer dynamiquement des requêtes multimédias. Par exemple :

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Ce mixin applique des styles pour une largeur minimale spécifiée dans la carte. Une approche similaire est utilisée pour le mixin break-to-device, qui cible une largeur maximale.

---

Application des mixins

Pour voir la puissance des mixins break-from-device et break-to-device, examinons des exemples pratiques de la façon de les utiliser pour implémenter des styles réactifs de manière dynamique.

Exemple 1 : application de styles par défaut pour les appareils mobiles

Par défaut, nous appliquons des styles pour les écrans mobiles en utilisant une disposition en grille qui fonctionne bien sur les petits écrans sans avoir besoin de mixin. Par exemple :

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

Dans ce cas, la mise en page est déjà optimisée pour les appareils mobiles. Les styles de base s'adressent par défaut aux utilisateurs mobiles.

Pour améliorer la réactivité sur les écrans plus grands, vous pouvez utiliser le mixin break-from-device pour cibler des points d'arrêt spécifiques.

---

Exemple 2 : Ciblage du paysage des tablettes

Sur les écrans plus petits, tels que les tablettes jusqu'au point d'arrêt paysage, certains éléments comme la barre latérale peuvent ne pas s'adapter correctement en raison de l'espace limité sur l'écran.

Dans de tels cas, nous pouvons masquer la barre latérale et l'afficher sous forme de popover de gauche pour donner la priorité au contenu principal. Par exemple :

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• tablette paysage : fait référence à la catégorie tablette et à sa sous-catégorie paysage dans la carte $break-devices.
• La requête média générée sera :

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

Pour les appareils plus grands que le point d'arrêt du paysage de la tablette, où plus d'espace d'écran est disponible, nous pouvons introduire une disposition à deux colonnes pour une meilleure distribution du contenu. Ceci peut être réalisé en utilisant le mixin break-from-device :

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
  }
}

• La requête média générée sera :

  @media screen and (max-width: 1219px) {
    .sidebar {
      display: none;
    }
  }

---

Exemple 3 : Ciblage des ordinateurs de bureau

À mesure que la taille des écrans augmente, plus d'espace devient disponible pour présenter le contenu.

Pour les ordinateurs de bureau, nous pouvons ajuster la disposition de la grille pour créer trois ou quatre colonnes, selon la taille de l'écran, en utilisant le mixin break-from-device.

Pour les petits ordinateurs de bureau :

Lorsque la taille de l'écran est suffisamment grande pour accueillir trois colonnes, les styles suivants s'appliquent :

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

• ordinateur de bureau petit : fait référence à la catégorie ordinateur de bureau et à sa petite sous-catégorie dans la carte $break-devices.
• La requête média générée sera :

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

Pour les grands ordinateurs de bureau :

Pour des écrans encore plus grands, nous pouvons créer quatre colonnes pour maximiser l'utilisation de l'espace de l'écran :

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• desktop large : fait référence à la catégorie desktop et à sa grande sous-catégorie dans la carte $break-devices.
• La requête média générée sera :

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

---

Élégance architecturale

Cette conception montre l'intention de l'auteur de donner la priorité à l'évolutivité et à la maintenabilité.

En regroupant les points d'arrêt en une seule source de vérité et en utilisant des mixins pour les requêtes multimédias, ils ont créé un système qui :

• Est facile à maintenir : La mise à jour des points d'arrêt ou l'ajout de nouveaux ne nécessite pas de parcourir la base de code.
• Améliore la lisibilité : Les requêtes multimédias sont résumées en composants logiques et réutilisables.
• Favorise l'évolutivité : De nouveaux appareils ou catégories peuvent être ajoutés à la carte sans interrompre les fonctionnalités existantes.

---

Pensées finales

L'exploration de MkDocs Material a approfondi mon appréciation pour la conception réfléchie dans l'architecture frontale.

L'utilisation de cartes Sass, de mixins et de structures de données hiérarchiques est une classe de maître dans les systèmes de conception maintenables et évolutifs.

Si vous cherchez à créer ou à améliorer vos propres styles réactifs, envisagez d'adopter des techniques similaires.

Avez-vous rencontré ou utilisé des cartes Sass dans vos projets ? J’aimerais entendre vos expériences et vos idées !

Vous voulez plonger plus profondément dans le monde du design ? Consultez nos autres articles de blog :

• Règles de base du design pour les non-concepteurs
• Principes puissants de conception et de mise en œuvre de l'interface utilisateur
• Créer de superbes widgets

Abonnez-vous pour recevoir une dose hebdomadaire d'informations sur le développement, l'informatique, les opérations, la conception, le leadership et bien plus encore.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!