Можно сделать такой mixin для scss?

В .scss стилях проекта много раз используется позиционирование, например:

.block{
position: relative;
top: 20px;
left: - 45px;
}
.logo{
   position: relative;

   span{
      position: absolute;
      top: -30px;
      right: 20px;
   }
}


Решил создать mixin вида

@mixin position($position, $top, $right, $bottom, $left){
	position: $position;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

.block{
@include position(relative, 20px, 0, 0, -45px);
}


Вопрос: Если в примере без mixin-a, я прописываю только 2 позиции с 4, в mixin-e я вообще могу ставить 0 для тех, которые не присваиваю?
  • Вопрос задан
  • 224 просмотра
Решения вопроса 1
Elwen
@Elwen
Можете. Но для сокращения итогового css, я бы добавила в миксин if, что бы выводились только те значения, которые нужны:
@mixin position($position, $top, $right, $bottom, $left){
  position: $position;
  @if($top!=null){
    top: $top;
  }
  @if($right!=null){
    right: $right;
  }
  @if($bottom!=null){
    bottom: $bottom;
  }
  @if ($left!=null){
    left: $left;
  }
}

.block{
  @include position(relative, 20px, null, null, -45px);
}

От проверки на 0 отказалась, что бы в крайнем случае можно было задать именно 0.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Вообще нет, для неопределенных позиций нужно ставить значение "auto".
P.S. Имхо, такой миксин не нужен. Он не упрощает, а даже в чем то усложняет добавление position
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
22 нояб. 2024, в 12:20
10000 руб./за проект
22 нояб. 2024, в 11:53
3000 руб./за проект
22 нояб. 2024, в 11:51
20000 руб./за проект