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 em
hoặc thậm chí vw
và ch
. 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 $number
với 0
và sau đó cộng 1
.
Sử dụng
$length: 42px; $value: strip-unit($length); // -> 42