如何在Visual Studio 2013中使用Sass

Question

如何在Visual Studio 2013中使用Sass CSS预处理器？是否有任何扩展为Sass提供支持？

Answer 1

Visual Studio 2013 Update 2

Visual Studio 2013 Update 2对SCSS和LESS文件都具有本机语法支持.您可以创建SCSS或LESS文件,并查看这些文件类型的语法突出显示和智能感知. 然而,它没有提供编译方法.

这是一个解释有关新功能的博客链接:

我们在VS2013 RTM中添加了LESS,现在我们有一个SASS项目项和编辑器.SASS编辑器功能可与LESS编辑器相媲美,包括着色,变量和Mixins IntelliSense,注释/取消注释,快速信息,格式,语法验证,概述,goto定义,颜色选择器,工具选项设置等.

请注意: 此更新似乎仅支持较新的SassyCSS语法.我已经尝试使用旧的缩进SASS语法,但没有任何成功.

汇编

• Web Essentials.这是一个很棒的工具,可以为您完成所有"咕噜"的工作.较新版本的Web Essentials可用于Visual Studio 2013 Update 3,4和5.
• 另一个只处理编译的免费版本是CompileSASS,这也适用于VS2015.
• 或者你也可以使用MindScape的WebWorkbench,它是一个很棒的工具,有很多不错的功能.有一个免费版本,它可以提供足够的功能,但也有一个更加全面的付费版本(但在我看来,考虑到有更好的免费替代品,有点太贵).

Visual Studio 2015

对于那些迁移到Visual Studio 2015的人来说,遗憾的是仍然没有对SASS和LESS编译的原生支持.不幸的是,Web Essentials也将不再支持编译.网络基础(克里斯滕森的Mads)的作者解释作出这一决定的原因在这里.

以下是可以处理编译的扩展列表:

WebCompiler(免费)

Mads Kristensen(web essentials的作者)创建了一个名为Web Compiler的独立编译工具.您所要做的就是安装它,然后右键单击要编译的任何SASS文件,并选择Web Compiler> Compile File.从那时起,它被观察,并且无论何时保存,文件都将被编译.

下载Web编译器

CompileSASS(免费)

与Web Compiler类似,这是一个独立的扩展,可以在VS2013和VS2015中使用,因为编译已从流行的Web Essentials扩展中删除.它非常轻巧,可以很好地完成错误报告.在此处阅读作者关于扩展程序的博客.

下载编译SASS

Web Workbench(免费/付费)

Mindscape的Web Workbench在编译SASS时多年来一直是我最喜欢的扩展,但后来我转而支持免费替代品.尽管如此,Pro版本是一个功能强大的工具,有许多方法可以自定义输出文件,但考虑到有免费工具,它也非常昂贵(39美元).

下载Web WorkBench

Visual Studio代码

与上述相同,它通过语法高亮和Intellisense对SASS和LESS提供原生支持,但缺少编译.

上面列出的任何编译器都可以工作,但如果你想手动设置编译,这是一个很棒的指南:

https://code.visualstudio.com/Docs/languages/css

Answer 2

对于其他寻找答案的人来说,我发帖是为了节省您的时间,因为有些答案有点过时了.

在Visual Studio 2013中处理小型Web项目时,我想第一次使用SASS.我做了一些挖掘,发现VS 2013 Update 2发布时对SASS(.scss)文件有本机支持.

经过一番挖掘,没有使用SASS的经验,我安装了Web Essentials 2013 for Update 2,用于编译和生成相应的.css文件.

即便如此,我还不清楚这一切是如何捆绑在一起的,但这篇博文很好地解释了第一个计时器的所有内容.

来自博客的片段(来自@akatakritos)

1. Visual Studio 2013提供添加SASS文件的功能(.scss)
2. 安装Web Essentials 2013 for Update 2
3. .scss向项目添加新文件,例如styles.scss
4. 更新styles.scss,保存,它将自动生成styles.css文件下的.scss文件
5. 然后,您可以像常规.css文件一样捆绑或链接它

2015年7月更新:

在稍后的Web Essentials更新中,即:2014年11月12日更新的版本2.5,已删除SASS编译器.

替代编译器:

• SassyStudio
• Web Workbench
• Web Compiler Only仅为VS2015提供支持

Answer 3

我没有使用过Chripy,但是你也可以尝试其他几种选择.

1. 我最喜欢在Visual Studio中使用Sass的扩展是Mindscape的Web Workbench.它集成得很好,可与Visual Studio 2013配合使用,甚至还支持Compass.如果您使用Less或CoffeeScript,它也将照顾这些.我也和其中一位开发人员聊过,他真的很敏感和友好,这在我的书中是一个巨大的优势.哦,我听到更多很酷的东西也在制作中.
2. SassyStudio是另一种可能性,但当我尝试它时,它似乎没有Web Workbench那么强大.
3. 它还没有出现,但请关注Web Essentials.目前它只支持LESS的CSS预处理器,但Sass支持已经收到了大量的请求,程序经理回答说"开发正在全力以赴".希望不久!

最后一个选项和我在很长一段时间内使用的选项只是使用外部工具监视我的SASS文件,在后台编译它们并让Visual Studio在编译时重新加载CSS文件.

通过命令行安装Ruby和SASS并告诉它观察项目目录的更改工作正常 - 但我喜欢Prepros这样的事情.

我没有尝试过它们,但Scout,Koala,LiveReload,Compass.app和Fire.app也是类似的选择.

虽然这些并不总是适用于每个项目的正确解决方案,但它们为您提供了很多灵活性和成熟度,而您在Visual Studio扩展中却找不到这些灵活性和成熟度.

我希望有所帮助!

Answer 4

要在Visual Studio中编译SCSS,请安装CompileSass Visual Studio Extension.

不幸的是,Web Essentials 不再支持编译Sass了.

我觉得这很难过,因为它绝对是从Visual Studio编译Sass的最简单方法.我创建了一个新的Visual Studio扩展,其行为方式相同.您只需安装扩展程序,它将在您保存时自动将.scss文件编译为压缩的.min.css文件.

看看CompileSass.