scss中下划线变量的私有性仅由@use模块系统实现,@import下所有变量(含$_开头)均全局可见且可覆盖;文件名下划线(_colors.scss)是partial识别规则,与变量名下划线无关。

SCSS 里加下划线的变量(比如 $_color-primary)不是语法级私有,它只是个命名习惯;真正能阻止外部访问的,是 @use 模块系统对 $_ 开头变量的默认不导出行为。
为什么 $_variable 在 @import 下完全无效
用 @import 引入文件时,所有内容——包括 $_color-warning、$color-success、@mixin reset——全被平铺进当前作用域。编译器根本不识别下划线,$_color-warning 和 $color-warning 对它来说毫无区别。
- 你写
@import 'colors';后,直接写color: $_color-warning;是合法且能编译通过的 - IDE 跳转会指向多个同名定义,根本分不清哪个是“本意”
- 两个模块都
@import 'mixins',里面都有$_base-padding,后加载的会静默覆盖前一个 - 构建工具可能重复输出同一段 CSS,因为
@import不做去重
@use 才是私有变量的基础设施
只有在 @use 模块系统中,$_ 开头的变量才默认不导出。这是 Sass 语言级行为,不是约定。
-
@use 'colors';后,colors.$color-primary可用,colors.$_color-warning直接报错Undefined variable - 想暴露某个
$_变量?必须显式写@forward 'colors' with ($_color-warning: #ffc107),但一般没必要 -
@use 'colors' as *;也不会把$_color-warning挂到全局,它依然不可见 - 文件名带下划线(
_colors.scss)和变量名带下划线($_color)是两回事:_colors.scss的下划线是 Sass 编译器识别 partial 文件的硬性规则;$_color的下划线只是字符,编译器完全无视
常见踩坑点:私有性是怎么被悄悄破坏的
即使用了 @use,私有性也可能因几处细节失效。
- 在同一个文件里混用
@import 'colors'和@use 'colors':前者会把所有变量倒进全局,彻底破坏后者建立的封装 - 在
buttons.scss里偷偷@import 'colors',整个模块隔离就崩了 -
@forward 'colors'时没加as *或with控制,会把源模块所有可导出项原样转发,包括你不希望暴露的变量 - 误以为
$_变量在 CSS Custom Property 中也私有——其实那是--_nav-item-color这种命名惯例,和 SCSS 变量无关
最容易被忽略的一点:私有性只存在于模块之间。一旦你在某个文件里 @use 'colors',又在同一文件里写了 @use 'buttons',这两个模块内部的 $_ 变量彼此完全不可见——但如果你在 buttons.scss 里用了 @import,那层隔离就没了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











