Fungsi Strip-unit - Trik CSS

Anonim

Ada banyak kebingungan seputar cara kerja unit di Sass. Namun, mereka bekerja persis seperti di kehidupan nyata. Jika Anda ingin menghapus satuan nilai, Anda harus membaginya dengan 1 satuan. Misalnya, untuk menghapus cmsatuan 42cm, Anda harus membaginya dengan 1cm. Ini bekerja persis sama di Sass.

$length: 42px; $value: $length / 1px; // -> 42

Tetapi bagaimana jika Anda tidak mengetahui unit yang digunakan? Katakanlah itu bisa apa saja, dari piksel hingga ematau bahkan vwdan ch. Kemudian kita perlu mengabstraksi logika dalam sebuah fungsi:

/// Remove the unit of a length /// @param (Number) $number - Number to remove unit from /// @return (Number) - Unitless number @function strip-unit($number) ( @if type-of($number) == 'number' and not unitless($number) ( @return $number / ($number * 0 + 1); ) @return $number; )

Perhitungannya mungkin terlihat aneh tapi sebenarnya masuk akal. Untuk mendapatkan 1satuan dari $number, kita bisa mengalikan $numberdengan 0lalu menjumlahkan 1.

Pemakaian

$length: 42px; $value: strip-unit($length); // -> 42