"Neden Ems" hakkında konuştuk. önceden burdaydı.
Em değerlerinde yeni olanlar için, Mozilla Geliştirici Ağı, ems'i açıklamakta mükemmel bir iş çıkarmaktadır:
… Em, söz konusu öğenin üst öğesi için geçerli olan yazı tipinin boyutuna eşittir. Yazı tipi boyutunu sayfanın herhangi bir yerinde ayarlamadıysanız, muhtemelen 16px olan tarayıcı varsayılanıdır. Yani, varsayılan olarak 1em = 16px ve 2em = 32px.
Hala piksel olarak düşünmeyi tercih ediyorsanız, ancak em'in faydaları gibi, hesap makinenizin elinizin altında olmasına gerek yok, Sass'ın işi sizin için yapmasına izin verebilirsiniz. Sass ile ems hesaplamanın çeşitli yolları vardır.
Satır içi matematik:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Not: Sass'ın birim değerini doğru şekilde ekleyebilmesi için oradaki "* 1em" e ihtiyacımız var. Aynı amaç için "+ 0em" de kullanabilirsiniz.
Sonuç:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Bu işe yarıyor, ancak bunu kolaylaştırabiliriz.
Em () Sass işlevi
Bu işlevi yazmanın epeyce farklı yolu vardır, bu bir Web Tasarımı Haftalık makalesinden:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Süper zeki! Bu işlev, emleri değere eklemek için Sass'ın dizgi enterpolasyonunu kullanır. $ Bağlam parametresinin varsayılan bir $ browser-context değerine sahip olduğuna dikkat edin (bu nedenle, bu değişkeni ne ayarlarsanız ayarlayın). Bu, Sass'inizdeki işlevi çağırırken, yalnızca $pixelsdeğeri tanımlamanız gerektiği ve matematiğin $browser-context- bu durumda - 16px'e göre hesaplanacağı anlamına gelir .
Örnek Kullanım:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Sonuç:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )The Sass Way'den dize enterpolasyonu yerine matematik kullanan benzer bir fonksiyon, string enterpolasyon fonksiyonumuz gibi değişkenleri kabul edecek şekilde kolayca değiştirilebilir:
//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; )Sass'ın unitless () yöntemini kullanan başka bir yöntem:
$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; )Bu, piksel birimini işlev çağrısına dahil etmemize veya eklemememize izin verir.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )