Maksimumkan Aliran Kerja Anda dengan Campuran dan Fungsi SASS Ini-tutorial css-php.cn

Maksimumkan Aliran Kerja Anda dengan Campuran dan Fungsi SASS Ini

Barbara Streisand

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

asal

735 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Maximize Your Workflow with These SASS Mixins and Functions

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!