Maximieren Sie Ihren Workflow mit diesen SASS-Mixins und -Funktionen-CSS-Tutorial-php.cn

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

Barbara Streisand

Freigeben： 2024-10-11 10:44:30

Original

735 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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. ?

Maximize Your Workflow with These SASS Mixins and Functions

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!