Maksimumkan Aliran Kerja Anda dengan Campuran dan Fungsi SASS Ini

Hei! Jika anda pernah mendapati diri anda menulis CSS yang sama berulang kali, atau jika anda bergelut untuk menjadikan reka bentuk anda responsif merentas saiz skrin yang berbeza, anda berada di tempat yang betul. Dalam artikel ini, saya akan berkongsi beberapa campuran dan fungsi SASS yang sangat berguna yang telah menjadikan aliran kerja saya lebih lancar. Alat kecil ini telah menjimatkan banyak masa dan usaha saya dengan memastikan kod saya KERING (Jangan Ulangi Diri Sendiri) dan membuat perkara seperti reka bentuk responsif, lapisan dan cache yang menyekat dengan mudah.

Sama ada menukar piksel kepada rem, mengendalikan indeks-z untuk reka letak yang lebih bersih atau mencipta kelas pembantu boleh guna semula, saya ada sesuatu di sini untuk anda. Izinkan saya membimbing anda melalui campuran dan fungsi ini yang boleh anda gunakan dengan mudah ke dalam projek anda dan mula menggunakannya dengan segera.

Contoh yang saya akan tunjukkan boleh ditambah baik atau dikembangkan dan anda boleh menemui lebih banyak contoh dalam talian. Tetapi ini adalah yang paling saya gunakan secara peribadi. Mari selami!

• Fungsi Pixel To Rem
• Pertanyaan Media Mixin Untuk Reka Bentuk Responsif
• Fungsi Indeks-Z Untuk Lapisan Hierarki
• Cache Busting Satu atau Berbilang Imej Latar Belakang
• Fon Penghilang Cache
• Kedudukan Mutlak
• Elipsis Teks
• Tuding Item
• Kelas Pembantu Untuk Kebolehgunaan Semula

Fungsi Piksel Kepada Rem

Tukar nilai piksel kepada rem.

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

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

Pertanyaan Media Mixin Untuk Reka Bentuk Responsif

Penggunaan campuran yang ringkas dan mudah dibaca untuk reka bentuk responsif dengan pertanyaan media.

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

Fungsi Indeks Z Untuk Lapisan Hierarki

Persediaan ini memastikan reka letak anda mempunyai hierarki lapisan visual yang bersih sambil mengekalkannya fleksibel dan berskala.

$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 Satu atau Pelbagai Imej Latar Belakang

Cache imej latar belakang menggunakan id

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

Fon Penghilang Cache

Cache fon apl menggunakan id.

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

Kedudukan Mutlak

Adun untuk elemen kedudukan mutlak. Urutan atas, kanan, bawah dan kiri adalah penting.

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

// Usage

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

Elipsis Teks

Potong teks melimpah dengan elipsis.

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

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

Tuding Item

Untuk keadaan tuding, membolehkan anda melepasi sifat tertentu.

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

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

Kelas Pembantu Untuk Kebolehgunaan Semula

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

Terima kasih kerana membaca. Jika anda rasa artikel itu berguna, jangan lupa like dan komen supaya orang lain juga boleh mengaksesnya. Jika anda berada di hari yang murah hati, anda juga boleh membelikan saya kopi. ?

Atas ialah kandungan terperinci Maksimumkan Aliran Kerja Anda dengan Campuran dan Fungsi SASS Ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!