Olemme puhuneet aiheesta "Miksi Ems?" täällä ennen.
Niille uusille em-arvoille, Mozilla Developer Network tekee erinomaisen työn selittää ne:
… Em on yhtä suuri kuin fontin koko, jota sovelletaan kyseisen elementin vanhempaan. Jos et ole asettanut kirjasinkokoa mihinkään sivulle, se on selaimen oletusarvo, joka on todennäköisesti 16 kuvapistettä. Joten oletusarvoisesti 1em = 16px ja 2em = 32px.
Jos haluat silti ajatella pikselinä, mutta kuten emme edut, laskimen ei tarvitse olla kätevä, voit antaa Sassin tehdä työn puolestasi. On olemassa useita tapoja laskea ems Sassin avulla.
Sisäinen matematiikka:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Huomaa: Tarvitsemme "* 1em" siellä, jotta Sass voi lisätä yksikön arvon oikein. Voit myös käyttää ”+ 0em” samaan tarkoitukseen.
Tulos:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Tämä toimii, mutta voimme tehdä sen helpommaksi.
Em () Sass-toiminto
Tämän toiminnon kirjoittamiseen on melko monta tapaa, tämä on Web Design Weekly -artikkelissa:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Super fiksu! Tämä toiminto käyttää Sassin merkkijonointerpolaatiota lisäämällä ne arvoon. Huomaa, että parametrin $ context oletusarvo on $ browser-context (joten riippumatta siitä, mihin asetat tämän muuttujan). Tämä tarkoittaa sitä, että kun soitat funktiota Sassissasi, sinun tarvitsee vain määrittää $pixelsarvo ja matematiikka lasketaan suhteessa $browser-context- tässä tapauksessa - 16 kuvapisteeseen.
Esimerkki käytöstä:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Tulos:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Samanlainen funktio, joka käyttää matematiikkaa Sass Way -merkkijonojen interpoloinnin sijasta, voidaan helposti muokata hyväksymään muuttujia, kuten merkkijonojen interpolointitoiminto:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Toinen, joka käyttää Sassin unitless () -menetelmää:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Tämän avulla voimme joko sisällyttää px-yksikön tai olla jättämättä toimintokutsuun.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )