Как создать условие в mixin на Stylus, чтобы в него можно было передавать не только ValuePx, но и Value?

Question

[AlexFreedom17]

Всем привет. У меня есть вот такой mixin на Stylus:

mixinName($value)
padding '%spx' % ($value)
margin '%spx' % ($value)

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

mixinName(10) компилировался в
padding 10px
margin 10px

mixinName(10px) компилировался в
padding 10px
margin 10px

mixinName(10rem) компилировался в
padding 10rem
margin 10rem

То есть чтобы по умолчанию он добавлял px, но если задавая значения внутри миксина я поставлю другой юнит, например rem, чтобы на выходе был rem у значения.

Answer 1

[Николай Шабалин]

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

В styles есть функция, которая отвечает за проверку единиц измерения (unit).

Осталось написать логику
padding unit($value) == '' ? ($value)px : $value

Если передали число без единицы измерения unit($value) == '', то к $value добавь px — ($value)px
Если хоть какую единицу измерения передали, то ничего не делай — $value

Полный миксин

mixinName($value)
  padding unit($value) == '' ? ($value)px : $value
  margin unit($value) == '' ? ($value)px : $value

с примером

body
  mixinName(10);
  
p 
  mixinName(10px);
  
b 
  mixinName(10rem);

компилируется в

body {
  padding: 10px;
  margin: 10px;
}
p {
  padding: 10px;
  margin: 10px;
}
b {
  padding: 10rem;
  margin: 10rem;
}