Nauhayksikön toiminta - CSS-temppuja

Anonim

Sassin yksiköiden toiminnassa on paljon hämmennystä. Silti he työskentelevät täsmälleen samalla tavalla kuin tosielämässä. Jos haluat poistaa arvoyksikön, sinun on jaettava se 1 yksiköllä. Esimerkiksi cmyksikön poistamiseksi 42cmsinun on jaettava se 1cm. Se toimii täsmälleen samalla tavalla Sassissa.

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

Mutta entä jos et tiedä käytössä olevaa yksikköä? Oletetaan, että se voi olla mitä tahansa, pikseleistä emtai jopa vwja ch. Sitten meidän on abstraktio logiikka funktiossa:

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

Laskelma saattaa näyttää oudolta, mutta sillä on järkevää. Jotta saataisiin 1n yksikkö $number, voimme kerrotaan $numbermukaan 0ja lisää sitten 1.

Käyttö

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