SASS / SCSS在单个项目中合并多值[重复]

Question

我有以下mixin：

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

还有一个：

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

  position: absolute;
  top: -50%
}

现在我想在同一个元素上使用它们，当然它会失败，因为最后被调用的将是赢家。

LESS 有一个 similar question，但我找不到 SASS 的任何解决方案。

不要拘泥于上面的代码，这只是一个例子。我不问如何使元素居中或如何旋转它；我也知道转换的顺序可能很重要，但是，有没有办法合并转换属性？

编辑

问题被标记为重复，但问题完全不同（答案也没有涵盖我的问题）。我问的是在单个块内共享属性：

div {
  @mixin rhombus;
  @mixin centerVertically;
}

附加的问题是关于访问继承属性和同级属性的问题。我的情况不同，我相信答案也可能不同。我不搜索操纵继承的财产。我正在寻找将属性值合并为一个的方法。虽然“重复”问题没有解决问题的问题，但我已经找到了答案。

Answer 1

我进行了一些研究，并在 SASS 的 repo 上找到了 following feature request，它准确地描述了这种情况。

是的，SASS 方面没有很好的解决方案。但是有一个workaround by mahdaen 可能真的很有帮助。以下代码完全属于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;
    }
}

有类似的用法

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

虽然在别人眼里可能看起来很脏，但我真的很喜欢它，因为经过小小的调整，它完全解决了我的问题。