如何在Visual Studio 2013中使用Sass

如何在Visual Studio 2013中使用Sass CSS预处理器? 有没有可以提供对Sass支持的扩展?

Visual Studio 2013更新2

Visual Studio 2013 Update 2对SCSS和LESS文件都有本机语法支持。 您可以创buildSCSS或LESS文件,并查看这些文件types的语法突出显示和智能感知。 但是它并没有提供一个编译的方法。

以下是博客的链接 ,介绍新function:

我们在VS2013 RTM中添加了LESS,现在我们有了一个SASS项目和编辑器。 SASS编辑器function与LESS编辑器相媲美,包括着色,variables和Mixins智能感知,注释/取消注释,快速信息,格式化,语法validation,概述,转义定义,颜色select器,工具选项设置等。

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

汇编

  • Web Essentials 。 这是一个很好的工具,可以为你做所有“咕噜”的工作。 较新版本的Web Essentials可用于Visual Studio 2013 Update 3,4和5。
  • 另一个只处理编译的自由的是CompileSASS,这也适用于VS2015。
  • 或者,您可以使用MindScape的WebWorkbench ,这是一个很棒的工具,有很多不错的function。 有一个免费的版本可以完成,但还有一个更全面的付费版本(但在我看来,考虑到有一个更好的免费select,有点太昂贵了)。

Visual Studio 2015

对于那些转移到Visual Studio 2015的人来说,不幸的是,SASS和LESS编译仍然没有本地支持。 不幸的是Web Essentials将不再支持编译。 Web Essentials(Mads Kristensen)的作者在这里解释了这个决定的原因。

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

WebCompiler(免费)

Mads Kristensen(Web essentials的作者)创build了一个独立的编译工具,称为Web Compiler 。 您只需安装它,然后右键单击要编译的任何SASS文件,然后selectWeb编译器>编译文件。 从这一点开始,它被监视,并且随时保存,文件将被编译。

下载Web编译器

CompileSASS(免费)

与Web编译器相似,这是一个独立的扩展,创build后可以在VS2013VS2015中使用,因为从stream行的Web Essentials扩展中删除了编译。 这是轻量级的,很好的错误报告。 在这里阅读作者的博客有关扩展。

下载编译SASS

Web Workbench(免费/付费)

Mindscape的Web Workbench是编译SASS多年以来我最喜欢的扩展,但是后来我转而select了免费的替代scheme。 不过,Pro版本是一个强大的工具,有很多方法来定制输出的文件,但它也相当昂贵(39美元),考虑到有免费的工具。

下载Web WorkBench


Visual Studio代码

实际上与上面相同,它通过语法高亮和智能感知支持SASS和LESS,但缺乏编译。

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

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

对于其他人寻找答案,我发布,以节省您的时间,因为一些答案是有点过时了。

在Visual Studio 2013中处理小型Web项目时,我想首次使用SASS。 我做了一些挖掘,发现VS 2013更新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.scss文件下的styles.css文件
  5. 然后,您可以将其捆绑或链接为一个常规的.css文件

更新2015年7月:

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

备用编译器:

  • SassyStudio
  • Web工作台
  • Web编译器仅支持VS2015

我没有使用Chripy,但有一些其他的选项,你也可以尝试。

  1. 我最喜欢在Visual Studio中使用Sass的扩展是Mindscape的Web Workbench 。 它很好地集成在Visual Studio 2013中,它甚至支持Compass。 如果你使用Less或CoffeeScript,它也会照顾到这些。 我也和其中一位开发者聊天过,他的反应很快,很友善,这在我的书里是非常有用的。 哦,而且我听到更多很酷的东西也在作品中。
  2. SassyStudio是另一种可能性,但是当我尝试使用时,它看起来不像Web Workbench那么强大。
  3. 它还没有出来,但要留意Web Essentials 。 目前它只支持CSS预处理器的LESS,但Sass的支持已经得到了很多的要求 ,程序经理回答说:“开发正在全速进行。 希望不久!

最后一个选项和我花了很多时间回顾一下,只是使用外部工具来观察我的SASS文件,在后台编译它们,让Visual Studio在编译时重新加载CSS文件。

通过命令行安装Ruby和SASS,并告诉它看着你的项目目录的更改工作正常 – 但我喜欢这种事情的Prepros 。

我还没有尝试过所有,但侦察兵 , 考拉 , LiveReload , Compass.app和Fire.app也是类似的select。

虽然这些并不总是适合每个项目的正确解决scheme,但它们为您提供了许多灵活性和成熟度,您在Visual Studio扩展中不一定能find它们。

我希望有帮助!

要在Visual Studio中编译SCSS,请安装CompileSass Visual Studio扩展。

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

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

检查出CompileSass 。

对于ASP.NET来说,有一些与SASS集成的方法。 Chripy是一个常用的插件,这是你想在Visual Studio中作为扩展安装的东西。
从而devise时间编译,您可以在http://chirpy.codeplex.com/find更多关于chripy的信息,;
还有另一个可以通过Nuget安装的软件包:

 install-package SassAndCoffee 

我写了一篇关于这个话题的博客文章,我觉得可以帮助别人。 基本上支持SCSS,但不支持SASS扩展。

http://pwkad.wordpress.com/2014/05/30/using-scss-in-visual-studio-2013-with-web-essentials-starring-compass-and-susy/

另外要小心,因为我遇到了一些编译Compass的问题,例如在compass / css3 / images文件中出现了错误。

我的评论可能是无用的,因为人们可能已经有了答案,但侦察员可用于Windows :),自2013年3月以来,我一直在使用我的项目。

你可以使用混合,真正强大,并创build您的CSS和JS文件的缩小版本。

我认为Web Essentials扩展 – 我假定每个web开发者正在运行,并且是本地VS IDE支持的先驱 – 具有SCSS编译支持,但我认为它只适用于C20中的VS2013 Update 2,它仍然在这次。

最后一个版本的Visual Basic + Web Essentials http://vswebessentials.com/download的最新版本允许使用Sass和Less。;

如果你有MVC 6 ,你可以使用gulp 。 原始来源: http : //developer.telerik.com/featured/css-preprocessing-with-visual-studio/

package.json添加NPM依赖项:

 { "name": "ASP.NET", "version": "0.0.0", "devDependencies": { "gulp": "3.8.11", ... "gulp-sass": "2.2.0", }, "dependencies": { "gulp-sass": "^2.2.0" } } 

然后在gulpfile.js

 var gulp = require("gulp"), ... sass = require("gulp-sass"); paths.js = paths.webroot + "js/**/*.js"; ... paths.sass = paths.webroot + "css/**/*.scss"; paths.cssOutput = paths.webroot + "css"; gulp.task('sass', function () { gulp.src(paths.sass) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(paths.cssOutput)); }); 

最后,在Task Runner Explorerright-click你的新任务sass然后selectBindings然后selectAfter Build

在Visual Studio 2013 SP 4中,添加SCSS文件并在每次保存时进行同步都没有问题。 当同步失败时我感到困惑,我发现问题是在定义之前使用variables。 SCSS文件不显示任何错误,但同步失败。

这适用于同步:

 $body-main: 45px; body { padding-top: $body-main + 25px; padding-bottom: $body-main - 5px; } 

这不适用于同步

 body { padding-top: $body-main + 25px; padding-bottom: $body-main - 5px; } $body-main: 45px; 

在第二种情况下,没有错误和智能感知工程,但同步失败。

Interesting Posts