saber 酱的抱枕

Fly me to the moon

01/24
2019
软件

VS Code 的 Live Sass Compiler 扩展

VS Code 的 Live Sass Compiler 扩展
vscode-live-sass-compiler GitHub 地址

我刚才想找一下 VS Code 上的 Sass 扩展,试了试 Live Sass Compiler,非常好用。它可以实时编译 Sass 文件,在同目录下生成同名的 .css 文件。

安装 Live Sass Compiler 之后重启 VS Code,可以看到状态栏上多了两个按钮:

VS Code 的 Live Sass Compiler 扩展

点击第一个按钮可以监视所有打开的 .Sass 和 .Scss 文件。当文件被保存时(自动保存或手动保存皆可),就会自动编译生成 css 文件。

VS Code 的 Live Sass Compiler 扩展

这个扩展还会连带安装另一个扩展 Live-server,所以会有第二个按钮。点击它可以创建一个实时更新的 web 服务器,默认会打开项目文件夹里的主页文件(如 index.html)。如果没有主页文件,则会显示文件夹的内容:

VS Code 的 Live Sass Compiler 扩展

手动点击里面的 html 文件,也一样可以自动更新,非常方便。

VS Code 的 Live Sass Compiler 扩展