跳到主要内容
Numio

灵活扩展：SCSS To 标准CSS — Numio

使用 Dart Sass 将 SCSS（.scss，花括号语法）编译为普通 CSS，然后用 Autoprefixer 添加厂商前缀。变量、@mixin/@include、嵌套以及 sass:math 等内置模块会被解析为扁平的 CSS 规则。

从 .scss 片段（例如 Bootstrap 风格的组件）获取编译后的 CSS，粘贴到没有 Sass 构建步骤的项目中。

Scss

CSS

适用场景

  • 从 .scss 片段（例如 Bootstrap 风格的组件）获取编译后的 CSS，粘贴到没有 Sass 构建步骤的项目中。
  • 在提交 SCSS 改动前，调试嵌套、& 选择器和 darken() 等颜色函数会如何展开。

使用方法

  1. 将 SCSS 粘贴到 Scss 编辑器，或将 .scss 文件拖入其中。
  2. 打开“设置”选择 Autoprefixer 目标：defaults、not ie < 11、last 2 versions、iOS 7、last 3 iOS versions。初始只开启 "defaults"。
  3. 复制 CSS 面板中的结果；它是普通 CSS，可直接保存为 .css 文件。

SCSS 输入

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

功能与限制

编译在服务器上进行：页面把代码 POST 到 /api/sass-to-css，由其以 scss 语法调用 Dart Sass 的 compileString。之后 Autoprefixer 和 Prettier 格式化在浏览器的 Web Worker 中运行。

每次输入都作为单个独立文件编译。@use 或 @import 你自己的 partial 会报错 "Can't find stylesheet to import"；@use "sass:math" 等内置模块可以正常使用。

如果输入不产生任何 CSS（只有变量、mixin 或函数），结果会是一条说明未生成 CSS 的 CSS 注释，而不是报错。

FAQ

支持 @use "sass:math" 和其他内置模块吗？

支持。代码由 Dart Sass 编译，因此 sass:math、sass:color、sass:map 等内置模块都可用。只有导入你自己的文件会失败，因为发送的只有粘贴的文本。

我的 SCSS 会被发送到服务器吗？

会。页面会把代码 POST 到自己的 /api/sass-to-css 端点进行编译，之后添加前缀和格式化在浏览器中完成。请勿粘贴不允许分享的代码。

能用于 .sass 缩进语法吗？

不能。此页面以 SCSS 语法编译，基于缩进的代码会解析失败。请使用 Sass 转 CSS 页面，它会向同一个 API 发送缩进语法标志。

如何为旧版浏览器添加厂商前缀？

打开“设置”，开启 "last 2 versions" 或 "not ie < 11" 等目标。所选查询会作为浏览器列表传给 Autoprefixer。

规范与参考资料