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

Question

[Павел Воронюк]

В .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 для тех, которые не присваиваю?

Answer 1

[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.

Comments

[Павел Воронюк]

Спасибо) вот то что в scss можно еще и if использовать не знал(

[Elwen]

Павел Воронюк: И не только if, но и for, each, while)

[Павел Воронюк]

Elwen: а я то думал что уже хоть половину понимаю в scss ) ага, фиг там)

Answer 2

[Денис Инешин]

Вообще нет, для неопределенных позиций нужно ставить значение "auto".
P.S. Имхо, такой миксин не нужен. Он не упрощает, а даже в чем то усложняет добавление position

Comments

[Павел Воронюк]

Не сказал что бы усложнял, так scss даже нагляднее.

[Денис Инешин]

Павел Воронюк: Всегда требуется писать всю инфу: (10px, null, null, null) - усложнение. К тому же, изменение position далеко не всегда означает что нужно изменить и координаты.

[Павел Воронюк]

Денис Инешин: если нужно присвоить без изменения координат, то да, руками прописать легче, а если нужно например position: absolute; top: 0; right: 0; bottom: 0; left: 0;

[Денис Инешин]

Павел Воронюк: а вот тут уже можно сделать простые миксины на эти частые случаи, а не мучиться с универсальным.