@function v/s @mixin 在 Sass-lang 中。使用哪一个？答案

【问题标题】：@function v/s @mixin in Sass-lang. Which one to use?@function v/s @mixin 在 Sass-lang 中。使用哪一个？
【发布时间】：2015-09-23 05:52:26
【问题描述】：

在搜索了很多 @function 和 @mixin 之间的差异之后，我最终来到了这里。

使用@mixin 优于@funcion 是否有任何优势，反之亦然。在什么情况下它们会有所不同，如何互换使用，请举个例子。

【问题讨论】：

我写了一篇类似的文章，可能对正在寻找深度知识的人有所帮助stackcoder.in/posts/…

标签： sass

【解决方案1】：

函数特别有用，因为它们返回值。 Mixin 与函数完全不同——它们通常只是提供有价值的代码块。

通常，在某些情况下您可能必须同时使用两者。

例如，如果我想创建一个long-shadow with SASS，我会调用这样的函数：

@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% ));
}

【讨论】：

另外，您将使用函数来访问 SASS 中的某些数据结构。例如，map-get-keys 是一个函数，因为它所做的只是在 SASS 映射中返回适当的键。
这并不能真正回答问题。您可以使用函数代替每次混合 - 您只需要返回包含所有规则的 css 代码块。问题是什么时候做，什么时候不应该做。

【解决方案2】：

@function 在您想在不同的 CSS 属性上重复使用它时很有用。

例如，您有想要在height 和min-height 上使用的动态值，那么您将使用@function：

@function dynamic-height($height, $padding) {
  @return $height + $padding;
}

.foo {
  min-height: dynamic-height(300px, 30px);
}

.bar {
  height: dynamic-height(300px, 30px);
}

但如果您想通过相同的 CSS 属性重复使用它，那么您可以使用 @mixin:

@mixin dynamic-height($height, $padding) {
  min-height: $height;
  padding: $padding;
}

.foo {
  @include @dynamic-height(300px, 30px);
}

【讨论】：