Question

LESS有一个名为Space的小功能，允许mixin将规则附加到现有属性。对transform（）mixins非常有用，因为你可以将多个转换规则附加到同一个属性，只需多次调用mixin，例如。

示例：

.scale() {
  transform+_: scale(2);
}
.rotate() {
  transform+_: rotate(15deg);
}
.myclass {
  .scale();
  .rotate();
}

输出：

.myclass {
  transform: scale(2) rotate(15deg);
}

我正试图进入SASS，但我不明白如何使用可用的语法实现这一点。无论我做什么，输出只应用其中一个转换，而不是两者。单独使用SASS实现此行为的最佳方法是什么？

Answer 1

您可以在mixin中使用变量参数，如下所示：

@mixin transform($transforms...) {
  transform: $transforms;
}
.myclass {
  @include transform(scale(0.5) rotate(30deg));
}

这将输出：

.myclass {
  transform: scale(0.5) rotate(30deg);
}

你可以在这里看到一个有效的例子：

http://codepen.io/sonnyprince/pen/RaMzgb

更多信息：

有时候，mixin或函数采用未知方法是有意义的参数的数量。例如，用于创建框阴影的mixin 可能会将任意数量的阴影作为参数。对于这些情况， Sass支持“变量参数”，它们是最后的参数一个mixin或函数声明，它包含所有剩余的参数和将它们打包为列表。这些论点看起来很正常参数，但后跟....

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

Answer 2

Sass没有提供这样的功能。

使用全局变量可以合理地接近。但是，您使用的每一个mixin，包括第三方提供的mix，都必须进行修改才能以这种方式工作。

// the setup
$append-property-vals: (); // global variable
$old-append-property-vals: (); // global variable
@mixin append-property($key, $val, $separator: comma) {
    $old-val: map-get($append-property-vals, $key);
    @if $old-val {
        $append-property-vals: map-merge($append-property-vals, ($key: append($old-val, $val, $separator))) !global;
    } @else {
        $append-property-vals: map-merge($append-property-vals, ($key: $val)) !global;
    }
}

@mixin append-properties {
    // cache the original value
    $old-append-property-vals: $append-property-vals !global;
    @content;

    // write out the saved up properties
    @each $key, $val in $append-property-vals {
        #{$key}: $val;
    }

    // restore the original value
    $append-property-vals: $old-append-property-vals !global;
}

// modify the OP's provided mixins to work
@mixin scale {
    // if the vals should be comma delimited, write `comma` instead of `space` for the 3rd argument
    @include append-property(transform, scale(2), space);
}
@mixin rotate {
    @include append-property(transform, rotate(15deg), space);
}

// call the mixins
.myclass {
    @include append-properties {
        @include scale;
        @include rotate;
    }
}

输出：

.myclass {
  transform: scale(2) rotate(15deg);
}

SASS相当于LESS Space（“+ _”）语法

2 个答案: