Funkce páskové jednotky - Triky CSS

Anonim

Způsob fungování jednotek v Sassu je značně zmatený. Přesto fungují přesně jako v reálném životě. Chcete-li odstranit jednotku hodnoty, musíte ji vydělit 1 jednotkou. Chcete-li například cmjednotku odebrat 42cm, musíte ji vydělit 1cm. V Sassu to funguje úplně stejně.

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

Ale co když neznáte používanou jednotku? Řekněme, že to může být cokoli, od pixelů po emnebo dokonce vwa ch. Pak potřebujeme abstrahovat logiku ve funkci:

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

Výpočet může vypadat divně, ale ve skutečnosti má smysl. Aby bylo možné mít 1z jednotky $number, můžeme násobit $numbertím, 0a pak přidat 1.

Používání

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