Chức năng Strip-unit - Thủ thuật CSS

Anonim

Có rất nhiều sự nhầm lẫn xung quanh cách các đơn vị hoạt động trong Sass. Tuy nhiên, chúng hoạt động chính xác như chúng làm trong cuộc sống thực. Nếu bạn muốn loại bỏ đơn vị giá trị, bạn phải chia nó cho 1 đơn vị. Ví dụ, để loại bỏ cmđơn vị của 42cm, bạn phải chia nó cho 1cm. Nó hoạt động giống hệt như trong Sass.

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

Nhưng nếu bạn không biết đơn vị đang sử dụng thì sao? Giả sử nó có thể là bất kỳ thứ gì, từ pixel đến emhoặc thậm chí vwch. Sau đó, chúng ta cần trừu tượng hóa logic trong một hàm:

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

Phép tính có vẻ kỳ quặc nhưng nó thực sự có ý nghĩa. Để có 1đơn vị của $number, chúng ta có thể nhân $numbervới 0và sau đó cộng 1.

Sử dụng

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