Maximieren Sie Ihren Workflow mit diesen SASS-Mixins und -Funktionen

Hallo! Wenn Sie jemals das gleiche CSS immer wieder schreiben mussten oder Schwierigkeiten damit hatten, Ihr Design auf verschiedenen Bildschirmgrößen responsiv zu gestalten, sind Sie hier richtig. In diesem Artikel werde ich einige wirklich nützliche SASS-Mixins und -Funktionen vorstellen, die meinen Arbeitsablauf viel reibungsloser gemacht haben. Diese kleinen Tools haben mir so viel Zeit und Mühe gespart, indem sie meinen Code trocken halten (Don’t Repeat Yourself) und Dinge wie responsives Design, Layering und Cache-Busting zum Kinderspiel machen.

Ob es darum geht, Pixel in Rems umzuwandeln, den Z-Index für sauberere Layouts zu verwalten oder wiederverwendbare Hilfsklassen zu erstellen, ich habe hier etwas für Sie. Lassen Sie mich Sie durch diese Mixins und Funktionen führen, die Sie ganz einfach in Ihr Projekt einfügen und sofort verwenden können.

Die Beispiele, die ich zeige, können verbessert oder erweitert werden, und Sie können noch vielfältigere Beispiele online finden. Aber das sind die, die ich persönlich am häufigsten verwende. Lasst uns eintauchen!

• Pixel-zu-Rem-Funktion
• Medienabfragen-Mix für Responsive Design
• Z-Index-Funktion für hierarchische Schichtung
• Cache-Busting einzelner oder mehrerer Hintergrundbilder
• Cache-Busting-Schriftarten
• Absolute Positionierung
• Text-Auslassungspunkte
• Element-Hover
• Hilfsklassen für die Wiederverwendbarkeit

Pixel-to-Rem-Funktion

Konvertieren Sie Pixelwerte in Rem.

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

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

Medienabfragen-Mix für Responsive Design

Eine einfache, leicht lesbare Mixin-Nutzung für responsives Design mit Medienabfragen.

@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;
  }
}

Z-Index-Funktion für hierarchische Schichtung

Dieses Setup stellt sicher, dass Ihr Layout über eine saubere Hierarchie der visuellen Ebenen verfügt und es gleichzeitig flexibel und skalierbar bleibt.

$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);
}

Cache-Busting einzelner oder mehrerer Hintergrundbilder

Hintergrundbilder mithilfe einer ID zwischenspeichern

$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;
}

Cache-Busting-Schriftarten

App-Schriftarten mithilfe einer ID zwischenspeichern.

$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;
}

Absolute Positionierung

Ein Mixin für absolute Positionierungselemente. Die Reihenfolge oben, rechts, unten und links ist wichtig.

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

// Usage

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

Text-Auslassungspunkte

Überlaufenden Text mit Auslassungspunkten abschneiden.

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

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

Element schweben

Für Hover-Zustände, damit Sie bestimmte Eigenschaften übergeben können.

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

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

Hilfsklassen für Wiederverwendbarkeit

// 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;
}

Vielen Dank fürs Lesen. Wenn Sie den Artikel nützlich finden, vergessen Sie bitte nicht, ihn zu liken und zu kommentieren, damit auch andere darauf zugreifen können. Wenn Sie einen großzügigen Tag haben, können Sie mir sogar einen Kaffee spendieren. ?

Das obige ist der detaillierte Inhalt vonMaximieren Sie Ihren Workflow mit diesen SASS-Mixins und -Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!