Пк то Ем функције - ЦСС-трикови

Anonim

Разговарали смо о „Зашто Емс?“ овде пре.

За оне који су нови у вредностима, Мозилла Девелопер Нетворк изврсно објашњава емс:

… Ем је једнака величини фонта која се односи на родитеља надређеног елемента. Ако нигде на страници нисте поставили величину фонта, онда је то подразумевани претраживач, који је вероватно 16 пиксела. Дакле, подразумевано 1ем = 16пк, а 2ем = 32пк.

Ако и даље више волите да размишљате у пк-у, али као и предности њих, калкулатор вам није потребан при руци, можете пустити да Сасс ради за вас. Постоје различити начини за израчунавање емс-а помоћу Сасс-а.

Уграђена математика:

h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )

Напомена: Тамо нам треба „* 1ем“ да би Сасс правилно додао јединичну вредност. У исте сврхе можете да користите и „+ 0ем“.

Резултат:

h1 ( font-size: 2em; ) p ( font-size: 0.875em; )

Ово успева, али можемо то олакшати.

Функција ем () Сасс

Постоји неколико различитих начина за писање ове функције, овај из чланка Недељног веб дизајна:

$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )

Супер паметан! Ова функција користи Сассову интерполацију низа за додавање вредности. Имајте на уму да параметар $ цонтект има подразумевану вредност $ бровсер-цонтект (дакле, на шта год да подесите ову променљиву). То значи да приликом позивања функције у вашем Сасс-у требате само да дефинишете $pixelsвредност и математика ће се израчунати у односу на $browser-context- у овом случају - 16 пиксела.

Пример употребе:

h1 ( font-size: em(32); ) p ( font-size: em(14); )

Резултат:

h1 ( font-size: 2em; ) p ( font-size: 0.875em; )

Слична функција која користи математику уместо интерполације низа из Сасс Ваи-а може се лако модификовати да прихвати променљиве попут наше функције интерполације стринга:

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

Други који користи Сасс-ов унитлесс () метод:

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

То нам омогућава да укључимо пк јединицу или не у функцијски позив.

h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )