SASS / SCSS merge multi-values within single item

Question

I have the following mixin:

@mixin rhombus() {
  @include transform(rotate(45deg));
}

and another one:

@mixin centerVertically() {
  @include transform(transform(0, -50%));

  position: absolute;
  top: -50%
}

Now I would like to use them both on the same element and of course it will fail because the last called will be a winner.

There is a similar question for LESS but I could not find any solution for SASS.

Don't stick to the code above, this is just an example. I don't ask how to center the element or how to rotate it; I also know the order of transformation can matter, but still, is there any way to make the transform property be merged?

EDIT

the question is marked as a duplicate, but the question is totally different (and answer is not covering my question as well). I am asking about sharing the properties within a single block:

div {
  @mixin rhombus;
  @mixin centerVertically;
}

The attached question is asked about accessing inherited properties and same level properties. My case is different and I believe the answer can be different as well. I don't search for manipulating the inherited property. I search for the way to merge the property values into one. And I already found an answer although the 'duplicate' question does not have the one which solves the problem.

Answer 1

I've made some research and found the following feature request on a SASS'es repo which describes exactly this case.

Yes, there is no nice solution for that SASS-wise. But there is a workaround by mahdaen which might be really helpful. The code below is fully belonging to this good guy

$tmp-box-shadow-value: none;

@mixin box-shadow($value, $append: false) {
    @if ($tmp-box-shadow-value == none) {
        $tmp-box-shadow-value: $value !global;
    }
    @else {
        $tmp-box-shadow-value: ($tmp-box-shadow-value, $value) !global;
    }

    @if ($append == false) {
        @include prefixer(box-shadow, $tmp-box-shadow-value, true);

        $tmp-box-shadow-value: none !global;
    }
}

with usage like

.shadow-elem {
    // Appending values.
    @include box-shadow(0 0 1px #ccc, true);
    @include box-shadow(0 0 1px #ddd, true);

    // Append and write the style.
    @include box-shadow(0 0 1px #eee);
}

Although it may seem dirty in somebody's eyes, I really like it as after small adaptions it fully solves my problem.