Sass中修改全局变量后，函数为何返回初始值？

在使用Sass的@function功能时，你遇到的全局变量修改无效、局部变量修改正常的情况，核心在于Sass的变量作用域规则和全局变量修改限制。

代码示例还原 #

情况一：全局变量未被修改

// first situation
$s: 8;
@function lome($a...) {
  @each $i in $a {
    $s: $s + $i; // 此处赋值实际创建了局部变量，未修改全局$s
  }
  @return $s;
}

@debug lome(1,2,3);
// 预期输出：14；实际输出：8

情况二：局部变量修改正常

// second situation
@function lome($a...) {
  $s: 8; // 显式声明函数内的局部变量
  @each $i in $a {
    $s: $s + $i; // 修改的是局部变量$s
  }
  @return $s;
}

@debug lome(1,2,3);
// 预期输出：14；实际输出：14

原因解析 #

1. 局部优先的作用域规则
   Sass遵循局部作用域优先的变量解析逻辑，在函数、@mixin这类局部作用域内，对同名变量赋值时，默认会创建一个全新的局部变量，而非直接修改外部的全局变量。

2. 全局变量修改需要显式声明
   若要在函数内部修改全局变量，必须在赋值语句后添加!global标志，明确告知Sass要操作的是全局作用域的变量。比如将情况一的赋值语句改为：

   $s: $s + $i !global;
   

   此时调用lome(1,2,3)，全局变量$s会被修改为14，函数返回值也会符合预期。

3. 情况一返回初始值的直接原因
   你提供的情况一代码存在语法疏漏（函数定义后未用大括号包裹函数体），导致@each循环和@return语句未被纳入函数作用域，函数实际返回的是未被修改的全局变量初始值8。即便语法修正，若未添加!global，函数内修改的也只是局部变量，最终返回值仍会是全局变量的初始值。

内容的提问来源于stack exchange，提问作者leo_256