Peta Sass vs Senarai Bersarang

mata teras

peta sass dan senarai bersarang adalah kedua -dua struktur data dalam SASS, dan pemetaan diperkenalkan di SASS 3.3. Pemetaan menyediakan pasangan nilai utama yang membolehkan penyimpanan data yang lebih kompleks, manakala senarai bersarang adalah struktur yang lebih mudah yang dapat menjimatkan data yang kompleks, tetapi kekurangan pasangan nilai utama.
Walaupun kerumitan pemetaan tambahan, mereka menjadi popular kerana keupayaan mereka menyimpan pelbagai data (seperti lebar breakpoint, nilai warna, susun atur grid, perkadaran jenis, dan butiran tipografi responsif lain). Sebaliknya, senarai bersarang lebih praktikal kerana kesederhanaan mereka dan kurang input.
Salah satu kelebihan utama menggunakan pemetaan SASS adalah keupayaan untuk mengakses nilai -nilai tertentu secara langsung, yang menjadikan kod tersebut lebih efisien dan mudah dibaca. Walau bagaimanapun, senarai bersarang mungkin lebih cepat untuk menulis dan mengekalkan, tetapi mereka tidak mempunyai pemeriksaan ralat pemetaan dan keupayaan pertanyaan terperinci.
Walaupun senarai bersarang mungkin lebih efisien dari segi input, mereka memerlukan kepastian mutlak bilangan item setiap senarai akan mengandungi dan pesanan mereka. Nilai yang hilang dalam senarai bersarang boleh menyebabkan kesilapan yang SASS tidak melaporkan, sementara untuk pemetaan, fungsi
• masih boleh memberikan nilai yang dikehendaki walaupun satu nilai hilang. map-get()

Tajuk artikel ini mungkin mengejutkan sesetengah orang. Jika anda seorang veteran SASS, anda mungkin ingat menggunakan senarai senarai untuk mensimulasikan hari-hari apabila array data bersarang (sebelum Ruby-Sass-3.3). (Ruby) SASS 3.3 menambah jenis data baru yang dipanggil pemetaan. Senarai senarai boleh menyimpan data kompleks dalam format bersarang, tetapi tidak mempunyai pasangan nilai utama. Peta menambah pasangan nilai utama dan membolehkan membuat pelbagai data.

Dengan kemunculan pemetaan, banyak pengguna SASS kami mula memasukkan segala -galanya ke dalam pemetaan (dan untuk alasan yang baik!). Semua lebar breakpoint, nilai warna, susun atur grid, perkadaran jenis, dan butiran tipografi responsif lain boleh dimasukkan ke dalam peta!

Sekarang Sass mempunyai pemetaan pasangan nilai utama, adakah alasan yang baik untuk menggunakan senarai senarai? Salah satu sebab teori adalah keserasian mundur: Jika sass anda mungkin dikekalkan oleh pemaju dengan versi lama yang dipasang, senarai itu akan membantu mereka. Walau bagaimanapun, dalam praktiknya, versi SASS biasanya dikawal oleh

atau konfigurasi projek lain, dan permata Ruby boleh dikemas kini dengan hanya satu arahan (package.json). gem update sass

Sebab yang lebih praktikal anda mungkin memilih untuk menggunakan senarai bersarang dan bukan pemetaan adalah bahawa terdapat kurang input. Mari kita bandingkan peta dan senarai bersarang untuk melihat bagaimana mereka membandingkan sintaks masing -masing dan gelung traversal.

Perbandingan tatabahasa

Dalam contoh kami, mari buat struktur data yang mengawal tipografi responsif. Ia akan menyimpan empat titik putus (baik, satu adalah paparan lalai terkecil). Untuk setiap titik putus, kami akan menyimpan lebar minimum, lebar maksimum, saiz fon asas, dan ketinggian garis asas.

sintaks pemetaan kompleks

Berikut adalah bagaimana kami menyimpan data dalam peta. Peta besar akan mengandungi empat kunci (label breakpoint) yang nilai -nilainya adalah peta pembolehubah yang perlu kita simpan dan gunakan. Dalam format yang boleh dibaca ini, kami mempunyai lebih daripada 450 aksara dan 26 baris.

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

Sintaks Senarai Bersarang

Senarai bersarang yang menyimpan data yang sama jauh lebih pendek. Walau bagaimanapun, kami tidak lagi memasukkan kunci kepada data, jadi kami perlu bergantung pada gelung atau memanggilnya dengan fungsi nth(). Iaitu, ia lebih pendek daripada peta: kurang daripada 180 aksara, hanya 6 baris.

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

Perbandingan kitaran

Apabila menulis struktur data, menulis senarai hanya memerlukan menulis satu pertiga masa pemetaan. Tetapi jika kita perlu gelung melalui nilai -nilai ini, maka bagaimana kita membandingkan?

gelung pemetaan kompleks

kita boleh gelung melalui item teratas dalam peta ini menggunakan kod berikut:

<code>@each $label, $map in $breakpoint-map {}</code>

Kedua -dua pembolehubah ($label dan $map) pada permulaan baris ini secara dinamik diperuntukkan apabila melelehkan data dalam peta dalam gelung. Setiap blok data peringkat atas mempunyai dua komponen: kekunci dan nilai. Kami menetapkan kunci kepada $label dan nilai (yang merupakan peta bersarang) kepada $map. Dalam gelung ini kita boleh menggunakan pembolehubah $label dan $map, yang secara automatik akan mewakili kunci dan nilai entri semasa.

Gelung akan meleleh empat kali, satu peta bersarang setiap meleleh. Walau bagaimanapun, untuk mendapatkan data berguna dari peta bersarang, kita perlu menggunakan fungsi map-get(). Fungsi ini mengambil dua parameter -nama peta dan nama kunci yang diperlukan -dan mengembalikan nilai yang berkaitan dengan kunci. Ia bersamaan dengan $array['key'] dan $object->key php atau object.key sintaks JavaScript dalam SASS.

untuk menggunakan @each untuk melangkah ke atas semua submaps dan memberikan nilai mereka kepada pembolehubah yang berguna menggunakan map-get(), kami berakhir dengan gelung 6-line, 220-aksara.

<code>@each $label, $map in $breakpoint-map {
  $min-width: map-get($map, min-width);
  $max-width: map-get($map, max-width);
  $base-font: map-get($map, base-font);
  $vertical-rhythm: map-get($map, vertical-rhythm);
}</code>

Gelung Senarai Bersarang

Senarai bersarang membuat gelung lebih cekap. Untuk peta, kita perlu menetapkan peta ke pembolehubah gelung dinamik dan kemudian menetapkan semua nilai kepada pembolehubah menggunakan map-get(), tetapi untuk senarai kita dapat dengan cepat menetapkan semua nilai kepada pembolehubah.

Oleh kerana setiap item dalam senarai peringkat atas mempunyai lima nilai yang sama dalam urutan yang sama, kami dapat dengan segera menetapkan setiap nilai kepada pemboleh ubah dinamik untuk digunakan dalam gelung. Dengan pembolehubah ini, kami tidak perlu menetapkan subvalues ​​kepada pembolehubah yang ada menggunakan map-get(). Gelung senarai bersarang yang kita perlukan hanya dua baris, kurang daripada 100 aksara.

<code>@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list {
}</code>

Amaran Senarai Bersarang

Senarai bersarang adalah kelebihan prestasi pemaju utama: Secara keseluruhan, anda boleh memasuki kurang daripada separuh seperti yang anda lakukan semasa menggunakan pemetaan. Walau bagaimanapun, terdapat sebab untuk menambah peta kepada SASS: mereka menyediakan fungsi yang disenaraikan tidak mempunyai: pemetaan nilai utama.

nilai terlepas

Jika anda bergantung pada senarai bersarang, anda mesti benar -benar pasti anda tahu berapa banyak item setiap senarai yang akan mengandungi dan pesanan mereka. Mari lihat apa yang berlaku jika kita terlepas item dalam senarai:

<code>$breakpoint-map: (
  small: (
    min-width: null,
    max-width: 479px,
    base-font: 16px,
    vertical-rhythm: 1.3
  ),
  medium: (
    min-width: 480px,
    max-width: 959px,
    base-font: 18px,
    vertical-rhythm: 1.414
  ),
  large: (
    min-width: 960px,
    max-width: 1099px,
    base-font: 18px,
    vertical-rhythm: 1.5
  ),
  xlarge: (
    min-width: 1100px,
    max-width: null,
    base-font: 21px,
    vertical-rhythm: 1.618
  )
);</code>

Jika kita cuba menjalankan kod, senarai terakhir akan pecah. Ia akan memberikan "xlarge" dengan betul kepada $label dan "1100px" kepada $min-width, tetapi kemudian ia menyerahkan "21px" kepada $max-width dan "1.618" ke $base-font, membuat $vertical-rhythm kosong. Akibatnya, kami mendapat pengisytiharan saiz fon yang tidak sah dan harta ketinggian garis yang hilang dalam titik putus terakhir. Juga, Sass tidak melaporkan kesilapan untuk ini, jadi kita tidak tahu sama ada perkara berjaya. Jika kita cuba menggunakan lebar maksimum untuk pertanyaan media, kita akan berakhir dengan nilai saiz fon (hanya 21px) - Saya fikir ini akan menjadi lebar maksimum yang sangat tidak berguna!

Jika kita menggunakan peta sebaliknya, walaupun nilai hilang, fungsi map-get() akan memberi kita apa yang kita perlukan. Ini adalah tradeoff kami: kesederhanaan dan kelajuan yang kami dapatkan dalam senarai, kami kehilangan pencegahan kekhususan dan ralat dalam pemetaan.

menanyakan senarai tertentu

Satu lagi masalah yang berkaitan dengan menggunakan senarai bersarang adalah menanyakan senarai tertentu. Oleh kerana peta mempunyai kunci, anda boleh mengakses mana -mana submap menggunakan map-get():

<code>$breakpoint-list: (
  (small, null, 479px, 16px, 1.3),
  (medium, 480px, 959px, 18px, 1.414),
  (large, 960px, 1099px, 18px, 1.5),
  (xlarge, 1100px, null, 21px, 1.618)
);</code>

Untuk mendapatkan data untuk senarai sederhana dari senarai bersarang, kita memerlukan fungsi yang lebih kompleks:

<code>@each $label, $map in $breakpoint-map {}</code>

Fungsi ini gelung melalui semua senarai dalam $breakpoint-list, memeriksa nilai pertama label yang kami inginkan, dan mengembalikan senarai jika perlawanan dijumpai. Jika akhir gelung @each dicapai tanpa perlawanan yang dijumpai, ia akan kembali null. Ia pada dasarnya adalah tafsiran buatan sendiri yang cepat mengenai map-get(), yang menggunakan nilai pertama sebagai pseudo-key.

Fungsi pemetaan yang hilang

SASS mempunyai banyak fungsi berguna untuk mengendalikan pemetaan: Senarai bersarang tidak wujud dalam fungsi yang sama. Sebagai contoh, anda boleh menggunakan map-merge() untuk menambah pasangan nilai kunci tambahan ke peta. Gunakan map-merge() dengan kekunci yang dikongsi untuk mengemas kini nilai kekunci yang dikongsi. Anda boleh menambah senarai baru menggunakan join() atau append(), tetapi fungsi kemas kini yang simulasi map-merge() akan memerlukan fungsi sass tersuai yang lain.

Satu lagi fungsi pemetaan berguna ialah map-has-key(). Fungsi ini berguna untuk mengesahkan sebarang fungsi tersuai yang bergantung kepada map-get(). Walau bagaimanapun, tidak ada fungsi setanding untuk senarai tersebut.

Anda boleh menggunakan sassylists untuk mensimulasikan fungsi pemetaan senarai. (Perpustakaan ini menyediakan fungsi ini sebelum SASS menambah sokongan pemetaan.)

Kesimpulan

Oleh kerana peta menggunakan pasangan nilai kunci, mereka lebih kuat daripada senarai. Fungsi pemetaan SASS tambahan menyediakan cara praktikal untuk mencari data dan mengesahkan nilai yang dipetakan.

Senarai SASS bersarang mungkin lebih cepat untuk menulis dan mengekalkan, tetapi mereka mungkin tidak sesuai sebagai pemetaan untuk pemeriksaan ralat atau pertanyaan terperinci. Kebanyakan masa, saya fikir pemetaan adalah pilihan yang lebih baik, walaupun terdapat peningkatan keterujaan. Untuk blok kecil kod dan gelung penggunaan tunggal, saya kadang-kadang menggunakan senarai bersarang, tetapi pemetaan lebih sesuai untuk tetapan projek dan penyimpanan data.

Adakah anda membandingkan peta dan senarai bersarang dalam mana -mana kerja anda, atau refactored kod untuk mengutamakan satu ke atas yang lain? Kongsi pengalaman anda dalam komen!

anda dapat melihat kod yang digunakan dalam tutorial ini dalam inti sassmeister ini.

FAQ untuk pemetaan sass dan senarai bersarang (FAQ)

Apakah perbezaan utama antara peta sass dan senarai bersarang?

Pemetaan SASS dan Senarai Bersarang adalah alat yang berkuasa dalam preprocessors SASS, tetapi mereka mempunyai perbezaan yang jelas. Peta SASS adalah serupa dengan array bersekutu dalam bahasa pengaturcaraan lain, di mana setiap nilai dikaitkan dengan kunci yang unik. Ini menjadikannya mudah untuk mengambil, mengemas kini dan memanipulasi data. Sebaliknya, senarai bersarang adalah satu siri nilai yang serupa dengan tatasusunan dalam JavaScript. Mereka paling sesuai apabila anda perlu menyimpan dan melancarkan pelbagai nilai, tetapi mereka tidak mempunyai keupayaan untuk mengakses nilai khusus secara langsung yang disediakan oleh pemetaan.

bagaimana menggunakan pemetaan sass?

Untuk menggunakan peta sass, anda perlu menentukan peta dengan sepasang kurungan, setiap pasangan nilai utama dipisahkan oleh kolon. Sebagai contoh, . Anda kemudian boleh menggunakan fungsi untuk mengakses nilai -nilai dalam peta seperti berikut:

. $map: (key1: value1, key2: value2) map-get Bolehkah saya bersarang peta sass seperti senarai bersarang? map-get($map, key1)

Ya, anda boleh sarang peta sass seperti senarai bersarang. Ini amat berguna apabila anda ingin menggabungkan data yang berkaitan bersama -sama. Untuk mengakses nilai dalam peta bersarang, anda perlu menggunakan fungsi

dua kali:

.

map-get Bagaimana untuk melangkah ke atas peta sass? map-get(map-get($map, key1), key2)

Anda boleh melelehkan peta SASS menggunakan arahan

. Arahan

mengambil dua pembolehubah: kunci dan nilai. Berikut adalah contoh:

. @each @each Apakah kelebihan menggunakan pemetaan sass dan bukannya senarai bersarang? @each $key, $value in $map { … }

Pemetaan SASS mempunyai beberapa kelebihan berbanding senarai bersarang. Mereka membenarkan akses langsung kepada nilai tertentu, menjadikan kod anda lebih cekap dan mudah dibaca. Mereka juga menyediakan fungsi terbina dalam untuk memanipulasi pemetaan, seperti menambah, memadam, dan mengemas kini pasangan nilai utama.

Bolehkah saya menukar senarai bersarang ke peta sass?

Ya, anda boleh menggunakan fungsi

untuk menukar senarai bersarang ke peta sass. Fungsi ini mengambil senarai pasangan dan mengembalikan peta di mana setiap pasangan adalah pasangan nilai utama dalam peta.

Bagaimana menggunakan senarai bersarang di Sass?

Untuk menggunakan senarai bersarang di SASS, anda perlu menentukan senarai dengan sepasang kurungan, setiap nilai dipisahkan oleh ruang atau koma. Sebagai contoh, . Anda kemudiannya boleh menggunakan fungsi untuk mengakses nilai dalam senarai seperti berikut: $list: (value1, value2, value3). nth nth($list, 1) Bolehkah saya menggunakan peta sass dan senarai bersarang pada masa yang sama?

Ya, anda boleh menggunakan kedua -dua pemetaan SASS dan senarai bersarang. Sebagai contoh, anda boleh menggunakan pemetaan untuk menyimpan satu siri senarai dan sebaliknya. Ini berguna untuk mengatur struktur data yang kompleks.

Apakah batasan menggunakan pemetaan SASS atau senarai bersarang?

Walaupun pemetaan SASS dan senarai bersarang adalah alat yang berkuasa, mereka mempunyai beberapa batasan. Sebagai contoh, peta SASS tidak boleh mempunyai kunci pendua, dan urutan kunci dalam peta tidak dapat dijamin. Begitu juga, jika senarai bersarang menjadi terlalu besar atau terlalu kompleks, mereka boleh menjadi sukar untuk dikendalikan.

Bagaimana untuk memilih antara menggunakan peta sass atau senarai bersarang?

Pilihan menggunakan peta sass atau senarai bersarang bergantung pada keperluan khusus anda. Sekiranya anda perlu mengakses nilai tertentu secara langsung dan dapat memanipulasi data, pemetaan SASS mungkin pilihan terbaik. Jika anda hanya perlu menyimpan dan melepasi satu siri nilai, senarai bersarang sudah cukup.

Atas ialah kandungan terperinci Peta Sass vs Senarai Bersarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!