Fungsi Strip-unit - Trik CSS

Anonim

Terdapat banyak kekeliruan mengenai cara kerja unit di Sass. Namun, mereka bekerja sama seperti yang mereka lakukan dalam kehidupan sebenar. Sekiranya anda ingin membuang unit nilai, anda harus membahagikannya dengan 1 unit. Sebagai contoh, untuk mengeluarkan cmunit 42cm, anda mesti membaginya dengan 1cm. Ia berfungsi sama di Sass.

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

Tetapi bagaimana jika anda tidak mengetahui unit yang digunakan? Katakan ia boleh menjadi apa-apa, dari piksel hingga ematau bahkan vwdan ch. Maka kita perlu menyusun logik dalam 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; )

Pengiraannya mungkin kelihatan ganjil tetapi sebenarnya masuk akal. Untuk memiliki 1unit $number, kita dapat mengalikan $numberdengan 0dan kemudian menambah 1.

Penggunaan

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