用途:为 SCSS(Sassy CSS)项目提供一套可维护、可扩展的样式表编写规范,覆盖架构、命名、复用与性能。
主要能力:
- 文件组织:推荐 7-1 模式,将 abstracts、base、components、layout、pages、themes、vendors 分目录,main.scss 作为清单文件,并用 @use 按顺序引入。
- 变量与映射:语义化命名(如 $color-primary、$spacing-unit、$breakpoint-md),相关值用 map 分组,通过 map-get 访问。
- Mixin:响应式断点 respond-to、flex 工具、字号与截断、无障碍 visually-hidden 与 focus-visible。
- 函数:tint/shade 调色、px-to-rem 单位转换、spacing 间距计算。
- 命名与嵌套:采用 BEM(block__element--modifier),嵌套最多 3 层,状态与修饰符可接受第 2 层。
- 复用与循环:用 %placeholder 配合 @extend 定义按钮基类,用 @each/@for 批量生成间距与颜色工具类。
- 现代特性:模块系统 @use/@forward 替代已废弃的 @import,内置模块 sass:math、sass:color、sass:list、sass:map、sass:string。
使用方式:按上述目录与引入顺序组织文件,在组件中 @include 所需 mixin、调用函数、@extend 占位符;开发时启用 source map,生产环境关闭,并用 autoprefixer 处理厂商前缀。
适用场景:中大型前端项目的样式架构设计、团队编码规范统一、设计系统与工具类生成。
限制:资料未提供具体安装命令、构建工具配置、版本要求或收费信息;性能建议包括避免过高选择器优先级、除工具类外不用 !important、跨文件慎用 @extend。