Mixins in SASS: when is it time to stop?

Question

css

I fell in love with mixins to such an extent that I already wrap every property in them.
For example:
+circle instead of border-radius: 50%
+border instead of border: 1px solid red //for debugging
+block instead of display: block
+pseudo instead of position: absolute; content: ""
+v-center instead of position: absolute; top: 50%, transform: translateY(-50%)
etc.
Is this ok or too much?

Answer 1

Um, I'm certainly sorry to intrude. But mixins exist for something else.
When typing code in SASS/SCSS, you should always think about how it will look at the output.

@mixin example{
   border: 1px solid red;
}

.class1{
   @include example;
}

.class2{
   @include example;
}

.class1{
   border: 1px solid red;
}

.class2{
   border: 1px solid red;
}

Oops, double. It would be much better to use extends in such a situation:

%_example{
   border: 1px solid red;
}

.class1{
   @extend %_example;
}

.class2{
   @extend %_example;
}

.class1,  .class2{
   border: 1px solid red;
}

So what are mixins for? They are needed in two cases.
_

@mixin example($width, $color){
   border: $width solid $color;
}

.class1{
   @include example(1px, red);
}

.class2{
   @include example(2px, yellow);
}

.class1{
   border: 1px solid red;
}

.class2{
   border: 2px solid yellow;
}

Answer 2

IMHO, mixins make sense when there are several applied properties, or when a property \ property set is applied to the same set of objects. For example, the box-shadow mixin makes sense if it uses a fallback with a filter for IE.
Of the above, I would leave only the v-center mixin.