Mixin для использования переменных шрифтов - PullRequest
0 голосов
/ 03 декабря 2018

Возможно, неразрешимая проблема Sass / CSS: я использую переменный шрифт, но в настоящее время Chrome поддерживает только font-variation-settings вместо возможности использования font-weight, font-style и т. Д. Я все еще хочу использовать font-weight и т. Д. Для старых браузеровкоторые не поддерживают переменные шрифты.

Мне не нужно вводить два свойства каждый раз, когда я устанавливаю стиль шрифта или шрифт!Итак, я придумал несколько миксов:

@mixin font-weight($weight) {
    font-variation-settings: "wght" $weight;
    font-weight: $weight;
}

@mixin oblique($angle) {
    font-variation-settings: "slnt" $angle;
    font-style: oblique #{$angle + deg};
}

Очевидно, что иногда мне захочется использовать оба значения font-weight и oblique, и вы не сможете установить одно и то же свойство CSS дважды - это будетпросто переопределить.Итак, я придумал этот

@mixin font-weight($weight) {
    --weight: #{$weight};
    font-variation-settings: "wght" var(--weight), "slnt" var(--angle, 0);
    font-weight: $weight;
}

@mixin oblique($angle) {
    --angle: #{$angle};
    font-variation-settings: "slnt" var(--angle), "wght" var(--weight, 400);
    font-style: oblique #{$angle + deg};
} 

, который вроде работает, за исключением того, что значение по умолчанию для font-weight 400 не в порядке - это обычный вес браузеров по умолчанию, но он не учитывает тот факт, чтоЯ, вероятно, установил вес шрифта где-нибудь еще.Я мог бы наполовину сдаться и сделать из него один микс @mixin weight-and-oblique($weight, $oblique), но это ужасный API для работы с imo.Есть ли решение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...