在线SCSS/SASS转CSS工具

📖 使用说明

SCSS转CSS：在左侧编辑区输入或粘贴SCSS/SASS代码，右侧实时显示编译后的标准CSS。支持Sass的所有核心特性。

支持的Sass特性：

• 变量（$variable）和变量作用域
• 嵌套（Nesting）和父选择器引用（&）
• Mixins（@mixin / @include）和参数传递
• 继承（@extend）和占位符选择器（%）
• 运算（+ - * / %）和字符串运算
• 控制指令（@if / @else / @for / @each / @while）
• 自定义函数（@function）
• 内置函数（darken、lighten、mix、rgba等）
• @import 合并导入
• @media 嵌套和冒泡

🎯 适用场景

• 前端开发：将SCSS项目代码编译为标准CSS用于生产部署
• 学习Sass：实时查看SCSS代码对应的CSS输出，理解预处理器的工作原理
• 代码迁移：将已有的SCSS代码转换为纯CSS项目
• 快速原型：使用SCSS编写样式后快速编译验证

❓ 常见问题

SCSS和SASS有什么区别？

SCSS（Sassy CSS）使用大括号{}和分号;，语法与CSS更接近，是目前最主流的Sass语法。SASS（缩进语法）使用缩进代替大括号，不需要分号。本工具同时支持两种语法，默认使用SCSS格式。

这个工具支持所有Sass功能吗？

支持Sass的核心功能：变量、嵌套、Mixins、继承、运算、控制指令、自定义函数、内置函数等。使用sass.js库在浏览器中运行，与官方Sass编译器行为一致。

我的代码安全吗？

所有处理都在浏览器本地完成，没有任何代码上传到服务器。您可以在完全离线的情况下使用本工具。