Kami telah bercakap mengenai "Mengapa Ems?" di sini sebelum ini.
Bagi mereka yang baru dengan nilai em, The Mozilla Developer Network melakukan tugas yang sangat baik untuk menjelaskan ems:
… Em sama dengan ukuran fon yang berlaku untuk induk elemen yang dimaksudkan. Sekiranya anda belum menetapkan ukuran fon di mana sahaja di halaman, maka itu adalah penyemak imbas lalai, yang mungkin 16px. Oleh itu, secara lalai 1em = 16px, dan 2em = 32px.
Sekiranya anda masih memilih untuk berfikir dalam px, tetapi seperti kelebihan em, tidak perlu menggunakan kalkulator anda, anda boleh membiarkan Sass melakukan kerja untuk anda. Terdapat pelbagai cara untuk mengira em dengan Sass.
Matematik sebaris:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Catatan: Kami memerlukan "* 1em" di sana agar Sass menambahkan nilai unit dengan betul. Anda juga dapat menggunakan "+ 0em" untuk tujuan yang sama.
Keputusan:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Ini berfungsi, tetapi kita dapat mempermudahnya.
Fungsi em () Sass
Terdapat beberapa cara untuk menulis fungsi ini, ini dari artikel Web Design Weekly:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Sangat pandai! Fungsi ini menggunakan interpolasi rentetan Sass untuk menambahkannya ke nilai. Perhatikan bahawa parameter $ konteks mempunyai nilai default $ browser-konteks (jadi, apa sahaja yang anda tetapkan pemboleh ubah ini). Ini bermaksud bahawa semasa memanggil fungsi di Sass anda, anda hanya perlu menentukan $pixelsnilainya dan matematik akan dihitung berbanding $browser-context- dalam kes ini - 16px.
Contoh Penggunaan:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Keputusan:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Fungsi serupa menggunakan matematik dan bukannya interpolasi rentetan dari The Sass Way dengan mudah dapat diubah untuk menerima pemboleh ubah seperti fungsi interpolasi rentetan kami:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Yang lain menggunakan kaedah Sass 'unitless ():
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Ini membolehkan kita memasukkan unit px atau tidak dalam panggilan fungsi.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )