SCSS编译器不控制单条规则内CSS属性顺序，该顺序由lint工具如property-sort-order规则管理；需在.sass-lint.yml中启用并指定concentric-css预设，否则手写顺序易被格式化工具打乱。
SCSS 编译后 CSS 属性顺序混乱，不是编译器 bug，而是你没用对 lint 规则——property-sort-order 才是真正管排序的，但默认不启用，且必须配预设。
为什么改了 SCSS 顺序却没影响最终 CSS 属性位置
SCSS 编译器（Dart Sass）本身不负责 CSS 属性在单条规则内的排列顺序；它只保证选择器、嵌套结构和 @extend 的语义正确性。属性顺序完全由后续工具（如 PostCSS、stylelint 或构建时的 CSS 压缩器）控制，或者干脆就是你手写的顺序——而手写顺序在团队协作中极易被格式化工具打乱。
常见错误现象：.btn { color: red; display: block; } 被自动改成 display 在前，但你希望语义分组（布局类在前、视觉类在后）；VS Code 保存后没反应，或 CI 报 Property 'padding' should be before 'color' 却不知从哪改起。
-
property-sort-order规则不会自动生效，必须显式启用并指定排序策略 - 手写顺序 ≠ 最终顺序：Prettier、stylelint 自动修复、甚至某些编辑器的“格式化 CSS”功能都会重排
- 该规则对嵌套选择器也生效，比如
&:hover { top: 0; color: blue; }同样要排序
如何用 sass-lint 正确启用 property-sort-order
注意：这里说的 sass-lint 是 Ruby 版（scss_lint），不是 Node.js 的 stylelint。如果你项目里用的是 stylelint + stylelint-scss，请跳过本节——它们配置方式完全不同。
关键点：Ruby 版 sass-lint 的 property-sort-order 规则依赖内置排序表，不支持自定义数组，只接受预设名。
- 在
.sass-lint.yml中启用规则：property-sort-order: { enabled: true, order: concentric-css } -
concentric-css是唯一推荐的预设，按「布局 → 盒模型 → 边距 → 尺寸 → 文本 → 视觉」分组，社区共识度高 - 不要写
order: ['display', 'position', ...]—— 这个字段不接受数组，会静默失效 - 若升级
sass-lint到 v0.60+，旧版预设可能不兼容，需同步更新配置
VS Code 里规则不触发？检查这三处断点
最常发生的不是规则写错，而是链路没接通。
- VS Code 插件是否绑定了
scss语言模式？在设置里搜files.associations，确认"*.scss": "scss" -
.sass-lint.yml文件名是否带点、后缀是否为.yml（不是.yaml或.json）？sass-lint只认.sass-lint.yml - 插件是否启用了 “on save” 自动修复？在 VS Code 设置中搜
sass lint auto fix，勾选对应选项 - 终端跑
npx sass-lint src/**/*.scss能报错，但编辑器不提示 → 100% 是语言模式或路径绑定问题
别指望 sass-lint 修好所有顺序问题
它只管单条 CSS 规则内的属性顺序。真正导致样式覆盖失效的“顺序混乱”，往往出在更高层：
- 多个
@import文件的 CSS 输出顺序 —— 这归@use和入口文件组织管，sass-lint完全不碰 - Webpack 注入多个
标签的 DOM 顺序 —— 这得调mini-css-extract-plugin的chunkFilename或合并 entry - 第三方库的 CSS 被
import进 JS 后动态插入 —— 这类顺序只能靠style-loader的insert配置干预
也就是说：property-sort-order 解决的是「一个声明块里属性怎么排」，不是「哪个文件的样式该压在上面」——后者是架构问题，不是格式问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
