如何在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更新2
Visual Studio 2013 Update 2对SCSS和LESS文件均具有本机语法支持.您可以创建SCSS或LESS文件，并查看这些文件类型的语法突出显示和智能提示. 但是它不提供编译方法.
Visual Studio 2013 Update 2
Visual Studio 2013 Update 2 has native syntax support for both SCSS and LESS files. You can create SCSS or LESS files and see syntax highlighting and intellisense for these file types. It does not however provide a method of compilation.
Here's a link to the blog explaining about the new features:
我们在VS2013 RTM中添加了LESS，现在我们有了一个SASS项目 编辑. SASS编辑器功能可与LESS编辑器相媲美，包括 着色，变量和Mixins IntelliSense，注释/取消注释， 快速信息，格式，语法验证，概述，转到定义， 颜色选择器，工具选项设置等.
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 .这是完成所有艰巨"工作的出色工具 为你. Web Essentials的较新版本可用于Visual Studio 2013 Update 3、4和5.
- 另一个可以处理编译问题的免费软件是 CompileSASS 在VS2015中也可以使用.
- 或者，您可以使用 MindScape的WebWorkbench 一种 很棒的工具，有很多不错的功能.有一个免费版本可以满足您的需要，但还有一个付费版本，它的功能要全面得多(但我认为考虑到有更好的免费替代方案，这有点太昂贵了.)
- Web Essentials. This is a great tool which does all the 'grunt' work for you. Newer versions of Web Essentials are available for Visual Studio 2013 Update 3, 4 and 5.
- Another free one that just handles compilation is CompileSASS this also works in VS2015.
- Alternatively you could use MindScape's WebWorkbench, which is a great tool with lots of nice features. There is a free version which does just about enough to get by but there is also a paid version which is far more comprehensive (but in my opinion a little too expensive considering there is a better free alternative).
不幸的是，对于那些迁移到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的作者)创建了一个名为
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编译器，这是一个独立的扩展，创建后可以在 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工作台(免费/付费)
Mindscape的Web工作台是我多年来最喜欢的扩展在编译SASS时，但此后我不再使用免费的替代方法了. Pro版本仍然是一个功能强大的工具，可以通过多种方式来自定义输出文件，但考虑到那里提供免费工具，它也相当昂贵(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.
确实与上述相同，它通过语法高亮显示和Intellisense对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屋！
