SCSS转CSS编译器

这款 SCSS转CSS编译器 可以直接在浏览器中将 Sass SCSS 语法转换为标准 CSS。它专为前端开发人员、设计师、学习者和内容团队打造，能够快速测试变量、嵌套、mixin、循环和输出格式，无需打开完整的构建流水线。

如何使用

1. 粘贴 SCSS 代码：将您的 SCSS 源码粘贴到编辑器中，或加载其中一个快速入门示例。
2. 选择输出选项：选择 SCSS 或 Sass 语法，并选择您想要的 CSS 输出样式。
3. 编译 SCSS：点击“编译 SCSS”以在浏览器中运行 Sass 编译器。
4. 预览 CSS：在使用结果之前，查看生成的 CSS、指标、警告和实时预览。
5. 复制或下载：将编译后的 CSS 复制到剪贴板或将其下载为 .css 文件。

本编译器支持的内容

• 支持带有大括号和分号的 SCSS 语法，以及可选的缩进 Sass 语法。
• 支持变量、嵌套选择器、父选择器、mixin、include、循环、map 和常用的 Sass 函数。
• 提供展开（Expanded）、嵌套（Nested）、紧凑（Compact）和压缩（Compressed）输出样式，以满足不同的审查和交付需求。
• 提供沙盒化的预览框架，方便您查看视觉效果，且不会影响 MiniWebtool 页面。

SCSS 与 CSS 的区别

CSS 是浏览器可以理解的样式表语言。SCSS 是一种 Sass 语法，它增强了编写功能，例如变量、嵌套、mixin、循环、map 和可复用的 partials。在浏览器使用 SCSS 之前，必须先将其编译为普通的 CSS。

局限性

浏览器端编译非常适合快速检查，但它无法自动读取您本地文件系统中的私有项目文件。在测试导入时，请将 partials 粘贴到编辑器中。对于生产环境发布，请照常运行您的项目构建流水线，以生成 source map、自动添加浏览器前缀、进行代码压缩、框架集成并确保完整的 Dart Sass 兼容性。

常见问题 (FAQ)

SCSS转CSS编译器是做什么的？

SCSS转CSS编译器可以将变量、嵌套、mixin、循环和 partials 等 Sass SCSS 语法转换为浏览器可以读取的标准 CSS。

这个工具是在浏览器中编译 SCSS 吗？

是的。SCSS 源码是在您的浏览器中通过 JavaScript Sass 引擎进行编译的，因此正常使用不需要将您的样式表发送到 MiniWebtool 服务器。

它能编译 Sass 缩进语法吗？

是的。当您粘贴缩进的 Sass 代码时，请将语法选项从 SCSS 切换为 Sass。SCSS 仍然是默认选项，因为它是 Web 项目中最常用的语法。

为什么 @import 或 @use 语句失败了？

浏览器编译器无法自动读取私有项目文件。当您的样式表依赖于本地文件路径时，请将导入的 partials 粘贴到编辑器中，或者在您的构建系统中进行编译。

编译后的 CSS 可以直接用于生产环境吗？

生成的 CSS 适用于快速测试、交付、学习和代码片段。对于生产环境构建，仍建议通过您的项目流水线进行自动添加浏览器前缀（autoprefixing）、压缩、生成 source map 以及特定框架的处理。