SuperAPI AI 工具集

scss-best-practices

前端与建站

查看项目

更新于 10-16 01:16

技能介绍

用途:为 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。