Цикл по карте и использование функции по значению (SCSS)

Question

У меня есть карта размеров текста, которую я хочу зациклить и использовать функцию для каждого значения.

$textsizes: (
    '12'    : 12px,
    '14'    : 14px,
    '16'    : 16px,
);


@each $textSizeName, $textSizeUnit in $textsizes {
    .u-text-#{$textSizeName} {
        font-size: rem(#{$textSizeUnit});
    }
};

Функция rem просто превращает значение пикселя в значение rem.Функция работает как положено, когда используется вне цикла, но внутри ничего не происходит, она просто возвращает значение px.

Я также попытался поместить функцию в значение карты, например, так:

$textsizes: (
    '12'    : rem(12px),
    '14'    : rem(14px),
    '16'    : rem(16px),
);

А затем просто выведите значение в цикле, однако это будет просто возвращать значение в виде строки, а не результат функции.

Что я здесь не так делаю и как мне поступитьоб этом, чтобы получить результат, который я хочу?