Как создать mixin для шрифтов на Stylus с разными единицами измерения?
Необходимо доработать mixin, чтобы он мог принимать значения как с единицами измерения, так и без них. Если без них, то по умолчанию добавлять px.
Mixin, который есть сейчас:
font-size-mixin($font-size, $line-size = false) if unit(font-size) == '' font-size '%spx' % ($font-size) line-height '%spx' % ($line-size) else if $line-size font-size $font-size line-height $line-size else if $font-size == 10px font-size 10px line-height 16px if $font-size == 11px font-size 11px line-height 16px if $font-size == 12px font-size 12px line-height 16px else if $font-size == 14px font-size 14px line-height 20px else if $font-size == 16px font-size 16px line-height 20px else if $font-size == 19px font-size 19px line-height 20px |
font-size-mixin($font-size, $line-size = false) if unit(font-size) == '' font-size '%spx' % ($font-size) line-height '%spx' % ($line-size) else if $line-size font-size $font-size line-height $line-size else if $font-size == 10px font-size 10px line-height 16px if $font-size == 11px font-size 11px line-height 16px if $font-size == 12px font-size 12px line-height 16px else if $font-size == 14px font-size 14px line-height 20px else if $font-size == 16px font-size 16px line-height 20px else if $font-size == 19px font-size 19px line-height 20px
Задача в том, чтобы сделать возможным передавать в него значения с любыми единицами измерения, но если их нет, то по умолчанию прибавлять px.
Например:
font-size-mix(12, 20px)
Компилировалось в:
font-size 12px line-height 20px |
font-size 12px line-height 20px
или
font-size-mix(12px, 20)
Компилировалось в:
font-size 12px line-height 20px |
font-size 12px line-height 20px
Дополнительно:
А зачем такой велосипед? Просто интересно.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания mixin для шрифтов на Stylus с разными единицами измерения, вам нужно определить mixin с параметром для каждой единицы измерения, которую вы хотите использовать. Ниже приведен пример кода, который демонстрирует, как это можно сделать:
font-mixin(unit) font-size: unit // Использование mixin с разными единицами измерения h1 font-mixin(20px) h2 font-mixin(1rem) p font-mixin(16pt)
В этом примере `font-mixin` - это mixin, который принимает параметр `unit`, который затем используется для установки размера шрифта. Вы можете вызвать этот mixin и передать нужную единицу измерения для каждого элемента на вашем сайте.
Такой подход позволяет вам легко изменять размер шрифта на вашем сайте, используя разные единицы измерения, и делает ваш код более модульным и легким для поддержки.
Надеюсь, это поможет вам создать mixin для шрифтов на Stylus с разными единицами измерения! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.