Kami telah membicarakan tentang "Why Ems?" disini sebelumnya.
Bagi mereka yang baru mengenal nilai-nilai em, Jaringan Pengembang Mozilla melakukan pekerjaan yang sangat baik dalam menjelaskan ems:
… Em sama dengan ukuran font yang diterapkan ke induk dari elemen yang dimaksud. Jika Anda belum mengatur ukuran font di mana pun pada halaman, maka itu adalah default browser, yang mungkin 16px. Jadi, secara default 1em = 16px, dan 2em = 32px.
Jika Anda masih lebih suka berpikir dalam px, tetapi menyukai manfaat em, tidak perlu memiliki kalkulator, Anda dapat membiarkan Sass mengerjakannya untuk Anda. Ada berbagai cara untuk menghitung ems dengan Sass.
Matematika sebaris:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Catatan: Kita membutuhkan "* 1em" di sana agar Sass menambahkan nilai satuan dengan benar. Anda juga dapat menggunakan "+ 0em" untuk tujuan yang sama.
Hasil:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Ini berfungsi, tetapi kami dapat membuatnya lebih mudah.
Fungsi em () Sass
Ada beberapa cara berbeda untuk menulis fungsi ini, yang ini dari artikel Mingguan Desain Web:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Sangat pintar! Fungsi ini menggunakan interpolasi string Sass untuk menambahkannya ke nilai. Perhatikan bahwa parameter $ context memiliki nilai default $ browser-context (jadi, apa pun yang Anda setel ke variabel ini). Ini berarti bahwa saat memanggil fungsi di Sass Anda, Anda hanya perlu menentukan $pixelsnilainya dan matematika akan dihitung relatif terhadap $browser-context- dalam hal ini - 16px.
Contoh Penggunaan:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Hasil:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Fungsi serupa menggunakan matematika alih-alih interpolasi string dari The Sass Way dapat dengan mudah dimodifikasi untuk menerima variabel seperti fungsi interpolasi string 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; )Lain menggunakan metode unitless () Sass:
$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 memungkinkan kita untuk memasukkan unit px atau tidak dalam pemanggilan fungsi.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )