Strip-unit İşlevi - CSS Hileleri

Anonim

Sass'ta birimlerin çalışma şekli konusunda çok fazla kafa karışıklığı var. Yine de tıpkı gerçek hayatta yaptıkları gibi çalışırlar. Değer birimini kaldırmak istiyorsanız, onu 1 birime bölmeniz gerekir. Örneğin, cmbirimini çıkarmak 42cmiçin bölmeniz gerekir 1cm. Sass'ta tamamen aynı şekilde çalışır.

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

Peki ya kullanılan birimi bilmiyorsanız? Diyelim ki piksellerden emve hatta vwve hatta herhangi bir şey olabilir ch. O zaman mantığı bir fonksiyonda soyutlamamız gerekir:

/// 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; )

Hesaplama tuhaf görünebilir ama aslında mantıklı. Sipariş olması ise 1bir birimin $number, biz çarpın can $numbertarafından 0ve daha sonra ekleyin 1.

Kullanım

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