Как доработать mixin на Stylus, чтобы он принимал значения с разными единицами измерения?
У меня есть вот такой mixin
font-size-mix($font-size, $line-size = false) 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-mix($font-size, $line-size = false) 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
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы доработать mixin на Stylus так, чтобы он мог принимать значения с разными единицами измерения, можно воспользоваться возможностями функций в Stylus.
Прежде всего, создадим mixin с использованием функции `unit()` для преобразования значений в нужные единицы измерения. Например, рассмотрим следующий пример:
mixin size($property, $value) {$property} unit($value) .my-element size(width, 100px) size(height, 50%) .another-element size(width, 200px) size(height, 75%)
В данном примере, мы создали mixin `size`, который принимает два аргумента: `$property` (название свойства CSS) и `$value` (значение свойства). Внутри mixin мы используем функцию `unit($value)`, которая преобразует значение `$value` в нужные единицы измерения.
Затем, мы применяем mixin `size` к различным элементам нашего стиля, указывая нужные значения и их единицы измерения.
Таким образом, мы можем легко доработать mixin на Stylus так, чтобы он мог принимать значения с разными единицами измерения, используя функцию `unit()` для конвертации значений.