Is it possible to make such a mixin for scss?

Question

css

Positioning is used many times in .scss project styles, for example:

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

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

Decided to create a mixin of the form

@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);
}

Question: If in an example without a mixin, I write only 2 positions from 4, in a mixin, can I generally set 0 for those that I do not assign?

Answer 1

You can. But to shorten the final css, I would add an if to the mixin so that only the values ​​​​that are needed would be displayed:

@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);
}

She refused to check for 0, so that in the extreme case it would be possible to set exactly 0.

Answer 2

Not at all, for indefinite positions, you need to set the value to "auto".
PS IMHO, such a mixin is not needed. It does not simplify, but even complicates the addition of position