SASS 等价于 LESS Space ("+_") 语法答案

【问题标题】：SASS equivalent to LESS Space ("+_") syntaxSASS 等价于 LESS Space ("+_") 语法
【发布时间】：2016-04-15 08:59:25
【问题描述】：

LESS 有一个很棒的小功能，叫做Space，它允许 mixins 将规则附加到现有属性。对于 transform() mixin 非常有用，因为您可以将许多转换规则附加到同一个属性，只需多次调用 mixin，例如。

例子：

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

输出：

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

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

【问题讨论】：

标签： sass

【解决方案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

【讨论】：

此答案生成的 CSS 无效。此外，它并没有真正回答所提出的问题。
@cimmanon 意外添加了一个逗号。这也是 SCSS 的替代品 - 不是直接替代品。
如果有问题的 mixins 做其他事情以及设置转换属性，这对 OP 没有帮助。

【解决方案2】：

Sass 不提供这样的功能。

您可以通过使用全局变量来相当接近。但是，您使用的每一个 mixin，包括由第 3 方提供的 mixin，都必须进行修改才能以这种方式工作。

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

【讨论】：