如何在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后可以在VS2013和VS2015中使用，因为从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 Explorer ， right-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