前端 - 如何将 SCSS 代码直接转换为 CSS?

Question

在线编辑器,有没有能实现 scss 转换成 css 的?
我有一款自己的编辑器,支持用户编写 scss 代码,但是发现问题 浏览器不识别 scss 需要编译成 css

现在的做法是 让用户先去在线网站编译完成 再拷贝过来

有没有直接能集成在项目中的 scss2css 的这种库?

补充一下
需要运行在浏览器环境的~

Answer 1

Sass 1.63之后 支持Sass in the Browser

sass官方的playground https://sass-lang.com/playground/

Answer 2

纯前端 JS 实现的 SASS/SCSS 解析器：

https://github.com/medialize/sass.js

但肯定不能所有特性都完美兼容，具体兼容性列表文档里有写。所以如果你们有后端配合的话还是后端编译比较靠谱。

---

看了下楼上提到的 Sass in the Browser，除了不支持少部分高级编译特性外已经很完美了（这些特性都是配合工具链的，题主这种在浏览器里直接写代码的场景估计本来也用不上）。

Answer 3

你可以了解一下Sass in the Browser 官方现在已经实现了Browser

Answer 4

可以使用 JavaScript 库来将 SCSS 代码直接转换为 CSS，然后在浏览器环境中运行。其中，最流行的是 sass 库。

sass 库可以将 SCSS 代码编译成 CSS，并可以在浏览器中使用。你可以使用 npm 安装 sass 库，然后在你的 JavaScript 代码中引入它。以下是一个简单的示例：

var sass = require('node-sass');var scss = '$color: red; body { background: $color; }';var css = sass.renderSync({  file: scss,  outputStyle: 'compressed'}).css;console.log(css); // 输出压缩后的 CSS 代码

在上面的示例中，我们使用 node-sass 库将 SCSS 代码转换为 CSS。我们使用 renderSync 方法来同步执行编译，并将结果存储在 css 变量中。最后，我们将压缩后的 CSS 代码输出到控制台。

除了 node-sass 库之外，还有其他一些库可以将 SCSS 代码转换为 CSS，例如 dart-sass、sassjs 等。你可以根据自己的需求选择合适的库。

另外，如果你想将 SCSS 代码转换为 CSS 并直接在浏览器中使用，你可以考虑使用一些在线工具或编辑器，例如 SassMeister、CodePen 等。这些工具通常提供了实时预览和自动编译功能，可以帮助你快速查看 SCSS 代码的样式。