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

所附问题是关于访问继承属性和同级属性的问题。我的情况不同，我相信答案也会不同。我不搜索操纵继承的属性。我寻找将属性值合并为一个的方法。我已经找到了答案，尽管 'duplicate' 问题没有解决问题的答案。

Answer 1

我做了一些研究，在 SASSes 仓库中找到了 following feature request，它描述了这个案例。

是的，SASS-wise 没有很好的解决方案。但是有一个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;
    }
}

用法类似

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

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

SASS / SCSS 合并单个项目中的多个值

SASS / SCSS merge multi-values within single item

sass

compass