Sass 提升样式开发效率的核心是变量复用、嵌套结构、混合封装和模块化导入：通过变量统一管理常用值，嵌套简化层级书写，mixin 抽取通用样式，@import 实现文件模块化维护。
用 Sass 替代原生 CSS 能显著加快样式编写速度，核心在于变量复用和嵌套结构——它让样式更接近自然的思维逻辑，减少重复书写和全局搜索替换。
用变量统一管理颜色、字体、间距
把项目中频繁出现的值（比如品牌色、标题字号、常用边距）抽成变量，改一处，全盘生效。避免在多个选择器里反复写 #4a90e2 或 16px。
例如：
$primary-color: #4a90e2;$font-size-base: 16px;
$spacing-sm: 8px;
$spacing-md: 16px;
.btn {
color: $primary-color;
font-size: $font-size-base;
padding: $spacing-sm $spacing-md;
}
用嵌套写法贴合 HTML 结构
子元素样式直接写在父选择器内部，省去重复写父类名，也更直观反映 DOM 层级关系。尤其适合组件内样式组织。
立即学习“前端免费学习笔记（深入）”；
例如导航菜单：
.nav {
display: flex;
&__item {
margin-right: $spacing-md;
&:hover {
color: $primary-color;
}
}
&__link {
text-decoration: none;
}
}
编译后自动产出 .nav__item、.nav__item:hover、.nav__link 等完整选择器。
用混合（@mixin）封装常用样式组合
把经常一起出现的声明（如 Flex 布局、文字截断、清浮动）打包成可复用的 mixin，需要时一键调用，不重复写冗长代码。
例如：
@mixin flex-center {display: flex;
align-items: center;
justify-content: center;
}
.header { @include flex-center; }
.modal { @include flex-center; }
配合 @import 拆分文件，按模块维护
把变量、mixin、重置样式、组件样式分别放在不同 _variables.scss、_mixins.scss、_button.scss 文件中，主文件用 @import 汇总。修改某个模块不影响其他部分，协作也更清晰。
