如何在 Visual Studio 2013 中使用 Sass [英] How to use Sass in Visual Studio 2013
问题描述
如何在 Visual Studio 2013 中使用 Sass CSS 预处理器?是否有支持 Sass 的扩展?
How can I use the Sass CSS preprocessor in Visual Studio 2013? Are there any extensions that provide support for Sass?
推荐答案
Visual Studio 2013 Update 2
Visual Studio 2013 Update 2 具有对 SCSS 和 LESS 文件的本机语法支持.您可以创建 SCSS 或 LESS 文件，并查看这些文件类型的语法突出显示和智能感知.但是它不提供编译方法.
这是一个 链接 到解释新功能的博客:
Here's a link to the blog explaining about the new features:
我们在 VS2013 RTM 中添加了 LESS，现在我们有了一个 SASS 项目项和编辑.SASS 编辑器的功能可与 LESS 编辑器相媲美，包括着色，变量和混合智能感知，注释/取消注释，快速信息、格式、语法验证、大纲、转到定义、颜色选择器、工具选项设置等
We added LESS in VS2013 RTM, and we now have a SASS project item and editor. SASS editor features are comparable to LESS editor, include colorization, variable and Mixins IntelliSense, comment/uncomment, quick info, formatting, syntax validation, outlining, goto definition, color picker, tools option setting etc.
请注意:此更新似乎仅支持较新的 SassyCSS 语法.我试过让它与旧的缩进 SASS 语法一起工作，但没有成功.
Please note: This update seems to support the newer SassyCSS syntax only. I've tried getting it to work with the older indented SASS syntax without any success.
- 网络基础.这是一个很棒的工具，可以完成所有咕噜咕噜"的工作为你.较新版本的 Web Essentials 可用于 VisualStudio 2013 更新 3、4 和 5.
- 另一个只处理编译的免费工具是 CompileSASS 这也适用于 VS2015.
- 或者，您可以使用 MindScape 的 WebWorkbench，它是一个很棒的工具，有很多不错的功能.有一个免费版本，几乎可以过得去，但也有一个付费版本，它更全面(但在我看来，考虑到有更好的免费替代方案，有点太贵了).
对于迁移到 Visual Studio 2015 的人来说，遗憾的是仍然没有对 SASS 和 LESS 编译的本机支持.不幸的是，Web Essentials 也将不再支持编译.Web Essentials (Mads Kristensen) 的作者在这里解释了这个决定的原因.
For those of you moving to Visual Studio 2015, unfortunately there is still no native support for SASS and LESS compilation. And unfortunately Web Essentials will no longer be supporting compilation either. The author of Web Essentials (Mads Kristensen) explains the reason for this decision here.
以下是可以处理编译的扩展列表:
Here are a list of extensions that can handle compilation:
WebCompiler(免费)
Mads Kristensen(Web Essentials 的作者)创建了一个独立的编译工具，名为 Web 编译器.您所要做的就是安装它，然后右键单击要编译的任何 SASS 文件并选择 Web Compiler >编译文件.从那时起，它就会被监视，并且无论何时保存，都会编译该文件.
Mads Kristensen (the author of web essentials) has created a standalone compilation tool called Web Compiler. All you have to do is install it, then right click on any of the SASS files you want to compile and select Web Compiler > Compile File. From that point on it is watched and anytime it is saved, the file will be compiled.
CompileSASS(免费)
与 Web Compiler 类似，这是一个独立的扩展，它被创建用于 VS2013 和 VS2015，因为编译已从流行的 Web Essentials 扩展中删除.它是轻量级的，并且通过出色的错误报告可以很好地完成工作.在此处阅读作者关于扩展的博客.
Similar to Web Compiler this is a standalone extension that was created to work in both VS2013 and VS2015 because compilation was removed from the popular Web Essentials extension. It's lightweight and does the job very well with great error reporting. Read the author's blog about the extension here.
Web Workbench(免费/付费)
Mindscape 的 Web Workbench 是我多年来最喜欢的扩展在编译 SASS 时，但我已经离开，转而支持免费的替代方案.尽管如此，专业版仍然是一个强大的工具，可以通过多种方式自定义输出的文件，但考虑到有免费工具，它也相当昂贵(39 美元).
Mindscape's Web Workbench was my favourite extension for many years when compiling SASS but I have since moved away in favour of the free alternatives. Still, the Pro version is a powerful tool with many ways to customise the outputted files but it is also quite expensive ($39) considering there are free tools out there.
实际上和上面一样，它通过语法高亮和智能感知对 SASS 和 LESS 提供原生支持，但缺乏编译.
Same deal as above really, it has native support for SASS and LESS through syntax highlighting and Intellisense but lacks compilation.
上面列出的任何编译器都可以使用，但如果您想手动设置编译，这里有一个很棒的指南:
Any of the compilers outlined above will work but if you wanted to set up compilation manually here is a brilliant guide:
https://code.visualstudio.com/Docs/languages/css
这篇关于如何在 Visual Studio 2013 中使用 Sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
