跳到主要内容
Numio

简洁优雅：Sass To 标准CSS — Numio

使用 Dart Sass 将 Sass 缩进语法（.sass，无花括号和分号）编译为普通 CSS，然后针对你选择的浏览器目标运行 Autoprefixer。变量、mixin（=name / +name）和嵌套会被解析为扁平的 CSS 规则。

无需搭建 Sass 工具链，即可查看旧版 Rails 或 Bulma 风格项目中的缩进语法 .sass 文件会编译成什么。

Sass

CSS

适用场景

  • 无需搭建 Sass 工具链，即可查看旧版 Rails 或 Bulma 风格项目中的缩进语法 .sass 文件会编译成什么。
  • 从 .sass 片段生成普通 CSS，粘贴到不支持 Sass 的 CMS、邮件模板或 codepen 中。

使用方法

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

Sass 输入

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

功能与限制

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

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

厂商前缀取决于所选目标。在示例中，"defaults" 查询下 user-select 会加上 -webkit- 和 -moz- 前缀。

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

FAQ

这里的 Sass 和 SCSS 有什么区别？

此页面要求缩进语法：靠缩进表示嵌套，没有花括号和分号，使用 =mixin 和 +include 简写。花括号风格的代码请使用 SCSS 转 CSS 页面；两者调用同一个 API，只是语法标志不同。

能导入 _variables.sass 这样的 partial 吗？

不能。服务器只编译你粘贴的文本，没有文件系统或加载路径，因此导入你自己的文件会失败。请把 partial 的内容粘贴到使用它的代码上方。

如果文件只包含变量或 mixin 会怎样？

Sass 不会为从未使用的声明输出 CSS，因此页面会显示注释 /* No CSS generated: ... */。添加使用这些变量或引入该 mixin 的规则即可得到输出。

输出是压缩过的吗？

不是。CSS 为展开格式，并由 Prettier 格式化。&:hover 等嵌套选择器会写成 .button:hover 这样的独立规则。

规范与参考资料