scss中!important失效主因是内联样式（权重1000）优先级更高，需检查element.style；提权应避免深层嵌套，改用双类名、属性选择器或:where()；transition等动态属性禁用!important；优先通过组件库scss变量定制主题。
SCSS里加!important后样式反而失效，先看是不是覆盖了内联style
加了 !important 还不生效，大概率不是权重低，而是你在跟 JS 写的 element.style.color 或 iframe 里的内联样式硬刚。浏览器会优先执行内联样式（权重 1000），!important 也压不过它。
打开 DevTools → Elements 面板 → 选中元素 → 看 Styles 面板里有没有带 style="..." 的行；再点 Computed 面板，展开 color 值右侧箭头，确认最终来源是不是 element.style。
- 如果是，就得改 JS 逻辑，或用
setAttribute('style', '')清掉，而不是继续堆!important - 如果不是，再查有没有另一个同属性 + 同
!important+ 更高选择器权重的规则（比如.ant-btn[disabled] { color: red !important; }）
在SCSS中提权重，别嵌套三层父类
很多人写 .page .form .el-input__inner { border: 1px solid red !important; }，看似权重高了，但实际埋雷：父类可能被 JS 动态移除、组件库升级后 class 名微调（.el-input__inner 变成 .el-input--inner），整条规则就废了。
真正可控的提权方式是语义组合：
- 用双类名：
.input.input--error { border-color: #ff4d4f; }（权重 0,0,2,0） - 加属性选择器：
input[data-role="required"] { border-color: #ff4d4f; }（权重 0,0,1,1） - 用
:where()控制作用域：:where(.theme-dark) .input { color: white; }（不增权，但保证只在主题开启时生效）
transition、transform 这类动态属性千万别加!important
transition: all 0.3s !important; 表面看是“加强”，实则破坏浏览器对过渡状态的持续监听机制。一旦其他 class 里写了 transition: none;（哪怕没 !important），这条规则就会被覆盖，动画直接消失。
更稳的做法是固定基础类：
- 定义一个
.transition-base类，统一声明所有要过渡的属性 - HTML 中始终带上它：
<div class="card transition-base"> <li>后续状态类只改值，不碰 <code>transition：.card.is-open { transform: scale(1.05); }
这样既避免权重冲突，又让过渡行为可预测、可复用。
SCSS变量重写比提权更可持续
如果你在覆盖 Ant Design 或 Element Plus 这类组件库样式，靠提权只是临时解法。它们大多支持通过 SCSS 变量定制主题，比如：
$--color-primary: #ff4d4f; $--button-border-radius: 4px; @import "~element-plus/theme-chalk/src/index";
这种方式从源头接管样式生成，不会因 class 名变更而失效，也不需要和框架样式拼权重。
只有当变量不开放、或仅需微调单个组件实例时，才考虑提权——且必须配合明确的数据属性或唯一容器类，避免污染全局。
最常被忽略的一点：提权解决的是“谁赢”，但真正难的是“赢了之后还能不能改”。权重越高的选择器，后期解耦成本越高，尤其是跨团队协作时，没人敢删那条“看起来很关键”的父级约束。
