Bagaimana Projek SCSS Ini Kekal Tersusun Bermula dari Peta

Apabila bekerja pada dokumentasi untuk produk saya, LiveAPI, saya mula menggunakan MkDocs, penjana tapak statik yang menghasilkan dokumentasi yang bersih dan profesional.

Walau bagaimanapun, saya mendapati reka bentuknya agak membosankan dan memutuskan untuk meneroka projek itu untuk membuat beberapa penyesuaian.

Perjalanan ini membawa saya ke bahagian seni binanya yang menarik: peta Sass.

Apa yang bermula sebagai pengubahsuaian kasual bertukar menjadi penghargaan yang lebih mendalam untuk reka bentuk yang bernas di sebalik projek ini.

Dalam blog ini, saya akan meneroka cara peta Sass digunakan dalam tema Bahan MkDocs—khususnya, dalam campurannya—dan cara ia menyumbang kepada fleksibiliti dan kebolehskalaan sistem reka bentuk. Mari selami!

---

Apakah Peta Sass?

Peta Sass ialah struktur data nilai kunci dalam Sass, serupa dengan kamus dalam Python atau objek dalam JavaScript.

Ia membolehkan kami menyimpan data berkaitan secara padat dan mendapatkan semula nilai secara dinamik.

Dalam tema Bahan MkDocs, peta Sass digunakan untuk menentukan titik putus khusus peranti untuk reka bentuk responsif. Contohnya:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Peta ini menyusun titik putus ke dalam kategori (mudah alih, tablet, skrin) dan subkategori (potret, landskap, kecil, sederhana, besar).

Ia bukan sekadar takrifan statik—ia adalah tulang belakang bagaimana gelagat responsif dijana secara dinamik.

---

Cara Peta Sass Berfungsi dalam MkDocs Mixins

Tema menggunakan satu siri fungsi dan campuran untuk mengekstrak dan menggunakan data daripada peta $break-devices. Berikut ialah pecahan:

1. Mengekstrak Nilai Titik Putus

Fungsi peranti pilih-pecah merentasi peta untuk mencari kategori peranti yang berkaitan dan mendapatkan semula titik putus yang berkaitan.

Jika berbilang peringkat ditentukan (cth., potret mudah alih), ia menggali lebih dalam ke dalam hierarki.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

• @for Loop: Gelung ini berjalan dari item pertama hingga terakhir dalam senarai $device, memastikan setiap peringkat dalam hierarki disemak.
• @if Keadaan: Ini menyemak sama ada nilai semasa masih peta dan terus menggali jika benar. Jika tidak, ia terhenti dengan mesej ralat.
• map.get: Fungsi Sass terbina dalam yang mendapatkan semula nilai daripada peta menggunakan kekunci.

2. Mencipta Pertanyaan Media

Dalam SCSS, mixin ialah blok kod boleh guna semula yang boleh anda tentukan sekali dan gunakan sepanjang helaian gaya anda.

Ia membantu mengekalkan kod anda KERING (Jangan Ulangi Sendiri) dengan membenarkan anda memasukkan gaya atau logik beberapa kali tanpa mengulangi kod.

Sebagai contoh, jika anda perlu menggunakan set gaya berulang kali, anda boleh mencipta campuran dan menggunakannya semula di mana-mana yang diperlukan:

Campuran pecah daripada peranti dan pemisah ke peranti memanfaatkan fungsi ini untuk menjana pertanyaan media secara dinamik. Contohnya:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

Campuran ini menggunakan gaya untuk lebar minimum yang dinyatakan dalam peta. Pendekatan serupa digunakan untuk campuran pecah-ke-peranti, yang menyasarkan lebar maksimum.

---

Memohon Mixin

Untuk melihat kuasa campuran pecah daripada peranti dan campuran pecah ke peranti, mari lihat contoh praktikal tentang cara menggunakannya untuk melaksanakan gaya responsif secara dinamik.

Contoh 1: Menggunakan Gaya Lalai untuk Peranti Mudah Alih

Secara lalai, kami menggunakan gaya untuk skrin mudah alih menggunakan reka letak grid yang berfungsi dengan baik pada skrin kecil tanpa memerlukan campuran. Contohnya:

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

Dalam kes ini, reka letak sudah dioptimumkan untuk peranti mudah alih. Gaya asas memenuhi keperluan pengguna mudah alih secara lalai.

Untuk meningkatkan responsif untuk skrin yang lebih besar, anda boleh menggunakan campuran pecah daripada peranti untuk menyasarkan titik putus tertentu.

---

Contoh 2: Menyasarkan Landskap Tablet

Pada skrin yang lebih kecil, seperti tablet sehingga titik putus landskap, elemen tertentu seperti bar sisi mungkin tidak sesuai kerana ruang skrin yang terhad.

Dalam kes sedemikian, kami boleh menyembunyikan bar sisi dan menunjukkannya sebagai popover dari kiri untuk mengutamakan kandungan utama. Contohnya:

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• landskap tablet: Merujuk kepada kategori tablet dan subkategori landskapnya dalam peta $break-devices.
• Pertanyaan media yang dihasilkan ialah:

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

Untuk peranti yang lebih besar daripada titik putus landskap tablet, di mana lebih banyak ruang skrin tersedia, kami boleh memperkenalkan reka letak dua lajur untuk pengedaran kandungan yang lebih baik. Ini boleh dicapai menggunakan campuran pecah daripada peranti:

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
  }
}

• Pertanyaan media yang dihasilkan ialah:

  @media screen and (max-width: 1219px) {
    .sidebar {
      display: none;
    }
  }

---

Contoh 3: Menyasarkan Desktop

Apabila saiz skrin meningkat, lebih banyak ruang tersedia untuk mempersembahkan kandungan.

Untuk desktop, kami boleh melaraskan reka letak grid untuk membuat tiga atau empat lajur, bergantung pada saiz skrin, menggunakan campuran pecah daripada peranti.

Untuk desktop kecil:

Apabila saiz skrin cukup besar untuk memuatkan tiga lajur, gaya berikut digunakan:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

• desktop kecil: Merujuk kepada kategori desktop dan subkategori kecilnya dalam peta $break-devices.
• Pertanyaan media yang dihasilkan ialah:

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

Untuk desktop yang besar:

Untuk skrin yang lebih besar, kami boleh mencipta empat lajur untuk memaksimumkan penggunaan hartanah skrin:

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• desktop besar: Merujuk kepada kategori desktop dan subkategori besarnya dalam peta $break-devices.
• Pertanyaan media yang dihasilkan ialah:

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

---

Keanggunan Senibina

Reka bentuk ini menunjukkan niat pengarang untuk mengutamakan kebolehskalaan dan kebolehselenggaraan.

Dengan mengabstraksi titik putus menjadi satu sumber kebenaran dan menggunakan campuran untuk pertanyaan media, mereka telah mencipta sistem yang:

• Adalah Mudah Diselenggara: Mengemas kini titik putus atau menambah yang baharu tidak memerlukan pemburuan melalui pangkalan kod.
• Meningkatkan Kebolehbacaan: Pertanyaan media disarikan kepada komponen yang logik dan boleh diguna semula.
• Menggalakkan Kebolehskalaan: Peranti atau kategori baharu boleh ditambahkan pada peta tanpa melanggar fungsi sedia ada.

---

Fikiran Akhir

Meneroka Bahan MkDocs telah memperdalam penghargaan saya untuk reka bentuk yang bernas dalam seni bina bahagian hadapan.

Penggunaan peta Sass, campuran dan struktur data hierarki ialah kelas induk dalam sistem reka bentuk yang boleh diselenggara dan berskala.

Jika anda ingin mencipta atau memperbaik gaya responsif anda sendiri, pertimbangkan untuk menggunakan teknik yang serupa.

Pernahkah anda menemui atau menggunakan peta Sass dalam projek anda? Saya ingin mendengar pengalaman dan pandangan anda!

Ingin menyelam lebih dalam ke dalam dunia reka bentuk? Lihat catatan blog kami yang lain:

• Peraturan Asas Reka Bentuk untuk Bukan Pereka
• Prinsip Reka Bentuk dan Pelaksanaan UI yang Berkuasa
• Membuat Widget Hebat

Langgan untuk mendapatkan dos mingguan cerapan tentang pembangunan, IT, operasi, reka bentuk, kepimpinan dan banyak lagi.

Atas ialah kandungan terperinci Bagaimana Projek SCSS Ini Kekal Tersusun Bermula dari Peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!