Sass项目中的CSS样式重写规范应该怎么写？-css教程-PHP中文网

老项目重写css第一步是按功能拆分文件而非直接引入sass特性；需提取重置规则、变量、组件样式为独立文件，保留旧类名兼容性，并严格遵循@use命名空间和嵌套层级限制。

sass项目中的css样式重写规范应该怎么写？

老项目重写CSS时，先别动样式，先拆文件结构

直接在原 main.css 里塞 @use 或改变量名，90%会炸——旧样式和新 Sass 模块混编，$color-primary 被覆盖、@mixin reset-block 找不到、甚至编译不报错但按钮变透明。真正该第一步做的，是把现有 CSS 按功能切开：_reset.scss、_variables.scss、_button.scss，每个文件只做一件事。

用正则批量提取全局颜色/间距值，转成 $spacing-md: 16、$color-brand: #3a8ee6，不要带单位
把所有 div, p, ul { margin: 0; padding: 0 } 这类通配重置，剪出来单独存为 base/_reset.scss，后续用 @import（不是 @use）引入——因为 reset 是纯 CSS 规则，@use 对它无效
已有类名如 .btn 不要删，新建 components/_button.scss 重写它的样式，保留旧名，新需求加 .btn--secondary

@use 后变量报错“undefined”，其实是命名空间没加

@use "variables" 之后直接写 color: $color-primary 肯定报错——Sass 要求显式带命名空间，variables.$color-primary 才对。这不是啰嗦，是隔离的代价。

所有 @use 必须带别名：@use "variables" as var，然后统一用 var.$color-primary
基础模块（颜色、断点、z-index）必须收口到一个 _core.scss，里面用 @forward "variables" as var-*; 统一转发，上层只 @use "core" as core
别在 @mixin 内部或 @if 块里写 @use，Sass 会直接拒绝编译

嵌套超过 3 层就该抽离，不是为了“规范”而是为了可维护

.page .header .nav .item a:hover 这种选择器，Sass 编译后还是长选择器，权重爆炸、调试困难、复用率为零。嵌套不是炫技，是表达父子关系的辅助手段。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

嵌套层级严格控制在 3 层内，例如 .card { &__header { &--large { ... } } } 可以，再深就拆成独立选择器
禁止用标签名嵌套：article { h2 { ... } } —— 标签语义可能变，类名才稳定
用 & 时注意空格：&.is-active 是加类，&-active 是生成新类名，写错一个字符就漏样式

局部重置别用 * { margin: 0 }，用 all: unset + inherit 组合

弹窗内容区、富文本渲染容器这类需要剥离默认样式的场景，硬写 * { margin: 0; padding: 0 } 会干掉 <ul></ul> 的缩进、<button></button> 的边框，反而要补一堆 hack。

写 .modal-content * { all: unset; } 彻底清空，再对关键元素显式设值：.modal-content p { margin: 1em 0; }
需要保留浏览器默认行为时（比如表单控件），换用 all: revert，它会回退到 UA 样式表，比手动列属性靠谱
别在全局 body 上用 all: unset，它会抹掉所有继承链，font-family 都得重写

重写不是追求“全 Sass 化”，而是让每行代码都清楚地回答三个问题：谁在用它、为什么这么写、改了会影响谁。变量命名冲突、嵌套失控、重置误伤——这些问题不会因为用了 @use 就自动消失，它们藏在你第一次删掉 /<em> old reset below </em>/ 注释的时候。