用途:Sass/SCSS 用于 CSS 预处理,借助变量、嵌套、混入(mixin)、函数和模块系统组织样式代码,适合构建设计系统变量、组件样式与响应式布局。
主要能力:支持变量与映射(map)管理设计令牌;@use、@forward 模块系统与 with 配置;嵌套选择器与父选择器 &;带参数和 @content 的混入;内置与自定义函数(颜色、数学、字符串、列表);@if/@for/@each/@while 控制流;@extend 继承;内置模块 sass:math、sass:string、sass:list、sass:map、sass:color。
使用方式:安装命令为 npm install -D sass。通过 @use 'variables' as * 引入模块,用 @forward 重新导出,用 @use 'library' with (...) 配置默认变量。文件组织建议以 _ 前缀命名 partial,入口文件 main.scss 统一引入 tokens、mixins 与 components。
适用场景:设计令牌、按钮与卡片等组件样式、响应式断点混入、主题颜色与间距工具类生成。
限制:资料未提供具体构建工具集成、编译命令、浏览器兼容性或性能数据;@import 已弃用,应优先使用 @use;嵌套建议不超过 3-4 层。