chrome support for sass-CSDN博客

本文链接：https://blog.csdn.net/seavers/article/details/84396776

本文介绍如何在Chrome浏览器中开启对Sass的支持，包括设置步骤和使用方法。通过启用开发者工具实验选项，用户可以在Chrome中直接查看和调试Sass源文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=x-large]chrome support for sass[/size]

很多人说 chrome 已经支持 sass了，但是怎么个支持法，却没有提及，通过google，搜出来一些资料，共享下

[size=large]chrome开启sass[/size]
1. chrome://flags, 启用开发者工具实验 => 点击最下方重启
2. chrome开发者工具(F12), 右下角setttings,experiments,support for sass => 重启
3. OK 可以了

[size=large]如何使用[/size]
1. 使用sass --watch文件夹，实时编译 .scss 文件至 .css


   sass --watch .:. --debug-info --line-number

其中冒号前后，为监视的目录
2. chrome打开页面, 页面中的link，使用编译后的 .css
3. 开发者工具中，查看 .css 文件，已经变成了 .scss文件，并可以点击过去

[size=large]注意点：[/size]
debug调试， .scss 文件只支持 file://

Ps: 原以为会支持实时编译，原来不是，可惜了

参考:

[list]
[*][url]http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html[/url]
[*][url]http://wiki.netbeans.org/SourceMapsExampleSASS[/url]
[/list]