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

询问有关访问继承属性和相同级别属性的附加问题。我的情况不同，我相信答案也可能不同。我没有搜索操纵继承的属性。我搜索将属性值合并为一个的方法。我已经找到了答案，虽然重复了＃39;问题没有解决问题的那个。

Answer 1

我做了一些研究，并在SASS'es回购中找到了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);
}

虽然在某人看来它看起来很脏，但我真的很喜欢它，因为经过小小的改编它完全解决了我的问题。

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

1 个答案: