sass变量的作用域

嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。

<div class="test">111111111</div>
<div class="test2">111111111</div>

css：

  $fs2:20px;
.test{
  $fs2:30px;
  font-size: $fs2;
}
  .test2{
    font-size: $fs2;
  }

结果：局部的$fs2只在test有用，并没有覆盖全局的，所以在test2中，依然是全局 $fs2的值。

 

将局部变量转换为全局变量可以添加 !global 声明，这之后使用此变量，将会是改变后的值

$fs2:20px;
  .test{
    $fs2:30px !global;
    font-size: $fs2;
  }
  .test2{
    font-size: $fs2;
  }

结果：test2也是30px

 

局部或者全局重复声明，后者覆盖前者：

  $fs2:20px;
  
  .test{
    $fs2:30px;
    font-size: $fs2;
  }
  
  $fs2:30px;
  
  .test2{
    font-size: $fs2;
  }

结果：在全局重复声明了$fs2，test2使用的是后者的30px

 

转载于:https://www.cnblogs.com/yaoyao-sun/p/10813545.html