在Sass-lang @function v/s @mixin.哪一个使用？

Question

经过@function和@mixin之间的差异搜索后,我结束了这里.

使用@mixin优于@funcion是否有任何优势,反之亦然.在什么情况下它们会有所不同,如何互换使用它们,请提出示例.

Answer 1

函数特别有用,因为它们返回值.Mixins与函数完全不同 - 它们通常只提供有价值的代码块.

通常,有些情况下您可能必须同时使用两者.

例如,如果我想用SASS创建al ong-shadow,我会调用这样的函数:

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

然后用这个mixin调用它:

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

这为我们提供了实际的代码.

它包含在元素中:

h1 {
    @include longshadow(darken($color, 5% ));
}