Задать вопрос
@AlexFreedom17

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

Всем привет. У меня есть вот такой 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 у значения.
  • Вопрос задан
  • 65 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
У вас логика по сути сводится к отсутствию значения. На это отсутствие и нужно проверять. Если никаких единиц измерения нет, то подставь 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;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы