Menambahkan Satuan ke Nomor dengan Benar - Trik CSS

Anonim

Saat mengonversi bilangan tak bersatuan menjadi panjang, durasi, sudut atau apa pun, orang cenderung hanya menambahkan satuan sebagai string, seperti ini:

$value: 42; $length: $value + px; // 42px

Meskipun metode ini berfungsi, ini jauh dari ideal karena menghasilkan secara implisit mentransmisikan nilai awal sebagai string. Memang, jika Anda mencoba melakukan matematika dengan $lengthnilai mulai sekarang, Anda akan melihat bahwa Sass dengan cepat membuat kesalahan karena tidak dapat melakukan operator matematika dengan string.

Untuk mengatasi masalah ini, ada dua cara untuk melakukannya dengan benar:

$value: 42; $length: $value + 0px; // 42px
$value: 42; $length: $value * 1px; // 42px

Salah satu metode tersebut akan menghasilkan angka dengan benar seperti yang diharapkan, bukan string.