scss变量无法驱动运行时动画，仅编译时生成静态css；响应式收缩需用css自定义属性（如--sidebar-width）配合媒体查询覆盖和calc()计算，scss仅负责预设值与断点规则生成。
SCSS变量本身不能驱动运行时收缩动画，它只在编译阶段生成静态CSS；真要实现可切换、可动画的侧边栏收缩，必须用 CSS 自定义属性（--sidebar-width）配合 calc() 和类名切换，SCSS仅负责预设值、统一维护和生成断点规则。
为什么在@media里改SCSS变量没用
SCSS变量是编译时一次性求值的，比如写$sidebar-width: 240px，所有引用它的#{...}都会被替换成240px，然后打包进最终CSS。你在@media块里再写$sidebar-width: 60px，编译器直接忽略——它不是JavaScript里的let，不支持重赋值。
- 结果就是：小屏下CSS里还是
width: 240px，根本不会变 - 想让不同断点有不同宽度，得靠多套预设变量+类名，例如
.sidebar.is-mobile和.sidebar.is-desktop - 或者干脆放弃SCSS控制响应式逻辑，把宽度交给
--sidebar-width，媒体查询只负责:root里覆盖这个变量值
怎么用SCSS帮CSS变量“搭脚手架”
SCSS不直接参与动画，但能帮你安全、一致地生成CSS变量初始值和断点覆盖规则，避免手写错单位或漏声明。
- 在SCSS顶层定义语义化变量：
$sidebar-width-default: 240px、$sidebar-width-collapsed: 60px、$sidebar-breakpoint: 768px - 用
:root注入默认值：::root { --sidebar-width: #{$sidebar-width-default}; } - 在媒体查询中覆盖：
@media (max-width: $sidebar-breakpoint) { ::root { --sidebar-width: #{$sidebar-width-collapsed}; } } - 关键点：所有
calc(var(--sidebar-width) * 1px)都得写在CSS里，SCSS只管把数字塞进去，不碰calc内部
收缩动画该用width还是flex-basis
两者都行，但flex-basis在Flex布局中更自然，width在Grid或传统流式布局中更直觉；共同前提是：两端值都必须是具体单位（如240px→60px），禁用auto或百分比。
- 用
width：确保父容器没设overflow: hidden以外的限制，且transition: width 0.3s ease写在基础样式里，不是只在.collapsed中 - 用
flex-basis：父容器必须是display: flex且flex-direction: row，子项不能同时设width（会覆盖flex-basis） - 移动端慎用
width过渡：某些Android WebView对width插值支持差，优先选transform: scaleX()或translateX() - 无论哪种，都要加
overflow: hidden和min-width: 0，否则文字撑开、动画终点偏移
JS切换类名后动画不动？先查这三件事
常见不是代码写错，而是浏览器没触发重绘或样式被更高优先级覆盖。
- 检查是否用了内联
style="width: 240px"：它优先级高于CSS类，会导致.collapsed失效；一律用class控制，别用element.style.width - 确认
transition写在未折叠状态上，比如.sidebar { transition: width 0.3s; }，而不是只写在.sidebar.collapsed里 - 如果JS修改了
--sidebar-width但没动画，可能是浏览器没检测到变化——加一句getComputedStyle(el).transform强制同步（尤其Safari）
真正难的不是写动画，而是让CSS变量、Flex/Grid布局、过渡属性、JS状态、媒体查询五者不打架；变量名要不要带单位、calc()里乘1px是不是多余、min-width: 0该写在哪一层——这些细节不显眼，但漏一个，动画就卡在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
