混合指令@mixin 和 函数指令 @function 的区别

1、定义方式不同： @function 需要调用@return输出结果。而 @mixin 不需要。

@mixin large-text ($value: 20px) {
  font: {
    family: Arial;
    size: $value;
    weight: bold;
  }
  color: #ff0000;
}

@function double($n) {
　　@return $n * 2;
}

2、@mixin 是需要 @include来引用，而且不需要小括号，而 @function 是使用需要小括号来执行的。

 div {
   @include large-text;
   width: double(20px);
 }