如何在Visual Studio 2019中编译Dart Sass

Question

目前我使用的是Mads Kristensen的Web Compiler，但现在我遇到了编译新的Sass命令（如@use）或使用一些CSS计算的问题。

grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));

我发现了一个新的Sass实现：Dart Sass，但在Visual Studio中找不到管理它的扩展程序，只有一些适用于Visual Studio Code的扩展程序。

Web编译器最后更新于2018年。

我也尝试了Sass compiler，但是得到了相同的编译错误：

200px，（100％ -（var（-n）- 1）* 10px）/ var（-n）对于max来说不是正确的值。

即使它是纯工作的css，也许它太新了，编译器无法识别它。

现在唯一的方法是将该规则放入纯css文件中，并与由sass生成的css一起导入，但似乎不是一个好的解决方案。

- gt.guybrush

---

你可以暂时使用npm来构建你的scss文件，并将其与Visual Studio的任务运行器集成，但是你仍然会在Visual Studio中收到警告，因为它不受支持。 - Liero

请在此处为Visual Studio sass-dart支持投票：https://developercommunity.visualstudio.com/t/Dart-SCSS-Support-Request/1388380 - Liero

Answer 1

目前Visual Studio还不支持Sass Dart。请在此处为Sass Dart的支持投票：https://developercommunity.visualstudio.com/t/Dart-SCSS-Support-Request/1388380。您可以使用npm包来构建您的scss文件，使用Sass Dart，并使用npm脚本或JavaScript与Visual Studio的任务运行器集成，但在Visual Studio的代码编辑器中仍会出现语法错误。请注意保留HTML标签。

- Liero

Answer 2

您可以通过命令行安装dart-sass：npm i dart-sass sass-watch，然后通过gulpJs定义一个任务--> 安装gulpJs。

- Hossein Azizdokht

---

你在Visual Studio编辑SASS文件时，是否成功解决了语法错误？ - Liero

是的，当我把 Visual Studio 更新到 2019 版本时，我的 Sass 文件在编译时出现了错误。因此，我卸载了所有 Sass 包，并通过 npm 重新安装了它们。 - Hossein Azizdokht

请在您的回答中提及并分享您的gulp.js和package.json文件。我将授予最佳答案。 - Liero

如果您添加更多细节，我将标记为已接受的答案，就像Liero一样。此外，实际上我在实际项目中不使用npm或gulp：只使用Visual Studio工具来添加客户端库。 - gt.guybrush

Answer 3

更新
本回答中提出的扩展程序仅适用于Visual Studio Code，而非Visual Studio。因此，本回答中的建议解决方案并不能完全满足问题要求。感谢 @gt.guybrush 的反馈与澄清！

---

使用@use仅包含最实际的编译器扩展。

也许你想尝试：
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

或者你可以使用此版本在系统上安装自己的SASS：
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

更多关于情况的信息：
Live Sass Compiler - @use causes compilation error

- Brebber

---

两个都是针对 Visual Studio Code 的，不是针对我正在使用的标准版 Visual Studio。 - gt.guybrush

哦，抱歉。我以为那是同一个市场，扩展也在更大的包中运行。我会在答案中标记它。 - Brebber

不完全是。问题在于：规则@use和函数max都是Dart Sass引入的。大多数编译器仍未更新...如果可能的话，您可以为项目使用原始SASS（安装起来不那么复杂）。或者自己编写最大值计算代码。但是有一个问题：是否可能将SASS变量与CSS计算结合使用？如果要在SASS中进行计算，则不能使用百分比值，甚至不能使用css calc(...)函数或css vars。即使您使用Dart Sass也会出现错误。（只是可能的反馈，我不确定！） - Brebber

解决最大值问题的方法是覆盖Sass自己的函数，参考来源：https://stackoverflow.com/questions/55535307/sass-create-function-to-do-max-and-min-on-margin - gt.guybrush

太好了，你找到了解决方案。很好！只是为了避免误解：这意味着不在SASS中使用函数，这样你就可以在SASS本身中操作值。也就是说，使用SASS编写具有CSS函数输出的CSS代码。（calc（...）和max（...）的计算是在浏览器中完成的，而不是在SASS编译器中完成的。）我喜欢这种“混合技术”，并且我发现这种技术在编写复杂的CSS时变得越来越流行 :-) - Brebber