Подчеркивает размер шрифта mixin

Question

Я использую underscores starter theme для wordpress.

У них есть этот mixin, который я не знаю, что он пытается сделать.

// Rem output with px fallback 
@mixin font-size($sizeValue: 1) { 
    font-size: ($sizeValue * 16) * 1px; 
    font-size: $sizeValue * 1rem; 
} 

Может кто-нибудь объяснить математику за этим?
Как я могу использовать его, если мне заданы размеры шрифтов в px?

Answer 1

Он просто выводит размер вашего шрифта в rem с пиксельным резервом (здесь '16' - основной размер шрифта). Если вы используете @include font-size(1.2), он будет:

font-size: 19.2px; // fallback for those with no rem support 
font-size: 1.2rem; 

Эта примесь не подходит для преобразования размера шрифта в пикселах бэр.
Если вы хотите, чтобы написать свой код в пикселях и они преобразуются в бэр, то примесь должна выглядеть примерно так:

@mixin font-size-px-to-rem($value: 12) { 
    font-size: $value * 1px; 
    font-size: $value/16 * 1rem; 
} 

затем использовать его:

.test { 
    @include font-size-px-to-rem(14); 
} 

, который выводит на:

.test { 
    font-size: 14px; 
    font-size: 0.875rem; 
} 

Answer 2

Blimey, это немного больше абстракции, чем необходимо. Это немного работы, чтобы поменять, но это Mixin я использую:

$base-font-size: 16; 

@mixin font-size-rems($target-px-size) { 
    $rem-size: $target-px-size/$base-font-size; 
    font-size: $target-px-size * 1px; 
    font-size: $rem-size * 1rem; 
} 

я затем использовать его как это:

.example { 
    @include font-size-rems(24); 
} 

Какие выходы:

.example { 
    font-size: 24px; 
    font-size: 1.5rem; 
}