@Sass-lang中的函数v/s@mixin。使用哪一个?

@Sass-lang中的函数v/s@mixin。使用哪一个?,sass,Sass,在搜索了@function和@mixin之间的很多差异之后,我在这里结束了 使用@mixin比使用@function有什么好处吗?反之亦然。在什么情况下它们会不同,如何互换使用它们,请给出一些例子。函数特别有用,因为它们返回值。mixin与函数不同——它们通常只提供有价值的代码块 通常,在某些情况下,您可能必须同时使用这两种方法 例如,如果我想创建一个函数,我会调用如下函数: @function makelongshadow($color) { $val: 0px 0px $color;

在搜索了@function和@mixin之间的很多差异之后,我在这里结束了


使用@mixin比使用@function有什么好处吗?反之亦然。在什么情况下它们会不同,如何互换使用它们,请给出一些例子。

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

通常,在某些情况下,您可能必须同时使用这两种方法

例如,如果我想创建一个函数,我会调用如下函数:

@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映射中返回适当的键