问题描述
在使用 Sass 编写样式时,有可能会出现“Undefined variable…” 的错误,例如:
--------------- ----- --------- - ------ --------------- -
在这个例子中,若 $primary-color
未被定义,就会出现以下错误:
------ --------- --------- -----------------
在 Sass 中,变量的作用域是在它被声明的块(如 mixin、函数、规则)内,或是全局作用域内。如果你的变量是在另一个块内定义的,它就没办法被找到。
解决方案
方案 1:全局变量
将变量定义在全局的 :root
中,可以让所有样式都能访问变量。
----- - ---------------- ----- - --------- - ------ --------------------- -
如果使用的是 Sass 而不是 CSS 变量,可以采用下面的方式定义全局变量:
--------------- ---- -------- --------- - ------ --------------- -
在 !global
标记的变量可以在任何地方被访问到。
方案 2:引入变量文件
在 Sass 中,可以使用 @import
引入另一个文件的变量。
例如,在主文件中使用以下语句引入 _variables.scss
文件:
------- ------------
在 _variables.scss
文件中定义变量:
--------------- -----
现在,主文件中就可以使用 $primary-color
了:
--------- - ------ --------------- -
方案 3:Mixin
使用 mixin 可以避免在样式中手动使用变量。
例如,在 _mixins.scss
文件中定义了一个 mixin:
------ ----------- - --------------- ----- ------ --------------- -
在样式中使用该 mixin:
--------- - -------- -------------- -
这样,可以避免在样式中手动使用 $primary-color
变量。
总结
以上三种方案都可以用来解决 Sass 编译过程中出现 “Undefined variable…” 错误,建议在项目中加入统一的变量文件,避免手动使用变量。对于复杂样式可以使用 mixin,增加代码的可读性和可维护性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65b25aa0add4f0e0ffb899f0