Как изменить mixin на Stylus, чтобы он принимал значения с разными единицами измерения, сохраняя его функциональность?

  • 30 августа 2023 г. 12:07
Ответы на вопрос 1
Для того чтобы изменить mixin на Stylus, чтобы он принимал значения с разными единицами измерения, можно использовать встроенную функцию `unit()`. Эта функция позволяет добавлять единицы измерения к числу, если они не указаны.

Вот как можно изменить данную mixin, чтобы он работал с разными единицами измерения и автоматически добавлял единицы px, если они не указаны:

```stylus
mixin size($property, $value)
  if unit($value) == ''
    $value = $value + 'px'
  $property $value
```

Теперь, если вы вызываете этот mixin без указания единиц измерения, он автоматически добавит 'px'. Например:

```stylus
.my-element
  size('width', 200)
  size('height', 50px)
  size('font-size', 16rem)
```

В результате этих вызовов получится следующий CSS:

```css
.my-element {
  width: 200px;
  height: 50px;
  font-size: 16rem;
}
```

Таким образом, значения без единиц измерения будут автоматически добавлены как 'px', а значения с другими единицами измерения будут оставлены без изменений.
Похожие вопросы