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

Question

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

使用@mixin 比使用@funcion 有什么优势，反之亦然。它们在什么情况下会有所不同，如何互换使用，请举例说明。

Answer 1

函数特别有用，因为它们具有 return 值。 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% ));
}

Answer 2

当您想在 不同的 CSS 属性 .

上重复使用时，

@function 很有用

例如，您有想要在 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);
}

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

@function v/s @mixin in Sass-lang. Which one to use?

sass