Options CSS globales avec propriétés personnalisées


J’ai essayé des idées sur la façon d’utiliser des propriétés personnalisées (alias variables CSS) pour les paramètres globaux d’un projet. L’idée est de permettre aux concepteurs / développeurs de contrôler des styles cohérents sur plusieurs composants. Voyez-le en action dans ce CodePenou lisez la suite pour plus de détails.

Avec Sass, c’est assez simple:

// Global option
$enable-shadows: false;

// Mixin that consumes the shadow
@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

// Put it to use
.component {
  @include box-shadow(0 .5rem 1rem rgba(0,0,0,.1));
}

Par défaut maintenant, box-shadowne sera pas inclus dans votre CSS compilé, sauf si vous modifiez $enable-shadows à true. Faire cela avec des propriétés personnalisées n’est pas aussi difficile que vous ne le pensez.

Avec des propriétés personnalisées, la logique est assez similaire grâce aux valeurs de repli. S’il y a un global --enable-shadows présente, qui prévaudra sur la valeur de repli. Pour activer le .component’S box-shadow, commenter ou supprimer --enable-shadows.

// Global option
:root {
  --enable-shadows: none;
}

// Put it to use
.component {
  box-shadow: var(--enable-shadows, 0 .5rem 1rem rgba(0,0,0,.1));
}

Vous pouvez également vous y prendre d’une autre manière en spécifiant une variable d’ombre globale et en la remplaçant au niveau du composant avec un utilitaire ou une classe de modificateurs.

// Global option
:root {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

// Put it to use
.component {
  box-shadow: var(--component-shadow);
}
.remove-shadow {
  // Because the custom property is within this ruleset,
  // it will only remove the shadow for this class
  --component-shadow: none;
}

Et avec cela, vous avez un contrôle de base sur les options globales de votre CSS sans avoir besoin d’un préprocesseur.

Auteur de l’article : manuboss