Maximisez votre flux de travail avec ces mixins et fonctions SASS

Salut ! Si vous avez déjà écrit le même CSS encore et encore, ou si vous avez du mal à rendre votre conception réactive sur différentes tailles d'écran, vous êtes au bon endroit. Dans cet article, je vais partager quelques mixins et fonctions SASS vraiment utiles qui ont rendu mon flux de travail beaucoup plus fluide. Ces petits outils m'ont permis d'économiser beaucoup de temps et d'efforts en gardant mon code SEC (Ne vous répétez pas) et en facilitant des tâches telles que la conception réactive, la superposition et le contournement du cache.

Qu'il s'agisse de convertir des pixels en rems, de gérer le z-index pour des mises en page plus propres ou de créer des classes d'assistance réutilisables, j'ai quelque chose ici pour vous. Laissez-moi vous présenter ces mixins et fonctions que vous pouvez facilement intégrer à votre projet et commencer à utiliser immédiatement.

Les exemples que je vais montrer peuvent être améliorés ou développés, et vous pouvez trouver des exemples encore plus diversifiés en ligne. Mais ce sont ceux que j’utilise personnellement le plus. Allons-y !

• Fonction Pixel vers Rem
• Requêtes multimédias Mixin pour une conception réactive
• Fonction Z-Index pour la superposition hiérarchique
• Cache Busing avec une ou plusieurs images d'arrière-plan
• Polices anti-cache
• Positionnement absolu
• Texte points de suspension
• Survol d'un article
• Classes d'aide pour la réutilisabilité

Fonction Pixel à Rem

Convertir les valeurs de pixels en rem.

@function rem($pixel) {
  $convertedValue: ($pixel / 16) + rem;
  @return $convertedValue;
}

// Usage
div {
  font-size: rem(32);
  width: rem(600);
}

Media Queries Mixin pour une conception réactive

Une utilisation du mixin simple et facile à lire pour une conception réactive avec des requêtes multimédias.

@mixin small {
  @media only screen and (max-width: 768px) {
    @content;
  }
}

@mixin medium {
  @media only screen and (max-width: 992px) {
    @content;
  }
}

@mixin large {
  @media only screen and (max-width: 1200px) {
    @content;
  }
}

// Usage
.title {
  font-size: 16px;

  @include small {
    font-size: 14px;
  }
  @include medium {
    font-size: 18px;
  }

  @include large {
    font-size: 20px;
  }
}

Fonction Z-Index pour la superposition hiérarchique

Cette configuration garantit que votre mise en page dispose d'une hiérarchie claire de couches visuelles tout en la gardant flexible et évolutive.

$z-index: (
  dropdown: 6,
  mobileMenu: 7,
  stickyHeader: 8,
  tooltip: 10,
  modalBackdrop: 11,
  modal: 12,
  header: 15,
  notificationToast: 18,
  spinner: 20,
);

@function z-index($key) {
  @return map-get($z-index, $key);
}

.header {
  z-index: z-index(header);
}

Contournement du cache avec une ou plusieurs images d'arrière-plan

Cache les images d'arrière-plan à l'aide d'un identifiant

$imageId: unique_id();

@mixin cacheBustBgImages($urls...) {
  $backgroundImages: ();

  @each $url in $urls {
    $backgroundImages: append(
      $backgroundImages,
      url("#{$url}?v=#{$imageId}"),
      comma
    );
  }
  background-image: $backgroundImages;
}

//   Single Image Usage

.hero {
  @include cacheBustBgImages("asset/images/image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

// Multiple Image Usage

.hero {
  @include cacheBustBgImages(
    "asset/images/image.png",
    "asset/images/other-image.png"
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Polices de contournement du cache

Cache les polices de l'application à l'aide d'un identifiant.

$fontId: unique_id();

@font-face {
  font-family: "Custom Fonts";
  src: url("asset/images/custom-font.eot?v=#{$fontId}");
  src: url("asset/images/custom-font.eot?v=#{$fontId}#iefix") format("embedded-opentype"),
    url("asset/images/custom-font.woff2?v=#{$fontId}") format("woff2"),
    url("asset/images/custom-font.woff?v=#{$fontId}") format("woff"), url("asset/images/custom-font.ttf?v=#{$fontId}")
      format("truetype"),
    url("asset/images/custom-font.svg?v=#{$fontId}#svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Positionnement absolu

Un mixin pour les éléments de positionnement absolu. L'ordre en haut, à droite, en bas et à gauche est important.

@mixin absolute($top, $right, $bottom, $left) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Usage

div {
  @include absolute(100px, 100px, auto, auto);
}

Points de suspension du texte

Tronquer le texte qui déborde avec des points de suspension.

@mixin text-ellipsis($max-width: 100%) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: $max-width;
}

// Usage
.element {
  @include text-ellipsis(200px);
}

Survol de l'article

Pour les états de survol, vous permettant de passer dans des propriétés spécifiques.

@mixin item-hover($color, $bg-color) {
  &:hover {
    color: $color;
    background-color: $bg-color;
  }
}

// Usage
.button {
  @include item-hover(white, black);
}

Classes d'assistance pour la réutilisabilité

// Center child elements both vertically and horizontally
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Center element both horizontally and vertically
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center text
.text-center {
  text-align: center;
}

// Hide element
.hidden {
  display: none;
}

// Hide element on desktop view
.d-none-desktop {
  @media screen and (min-width: 680px) {
    display: none;
  }
}

// Hide element on mobile view
.d-none-mobile {
  @media screen and (max-width: 680px) {
    display: none;
  }
}

// Add border radius to element
.border-radius {
  border-radius: 10px;
}

Merci d'avoir lu. Si vous trouvez l'article utile, n'oubliez pas d'aimer et de commenter afin que d'autres puissent également y accéder. Si vous êtes dans une journée généreuse, vous pouvez même m'offrir un café. ?

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!