如何在Visual Studio 2013中使用Sass

Question

如何在Visual Studio 2013中使用Sass

visual-studiosassvisual-studio-2013

71

我如何在Visual Studio 2013中使用Sass CSS预处理器？是否有提供对Sass支持的扩展程序？

- Hamed mayahian

点击这里查看。 - Sirwan Afifi

7

SASS支持已经在VS2013 Update 2中宣布（http://blogs.msdn.com/b/webdev/archive/2014/02/25/announcing-new-web-features-in-visual-studio-2013-update-2-ctp2.aspx），目前正在社区技术预览版中。 - Zhaph - Ben Duguid

4

如果你在想，这个问题正在meta上被讨论。 - user692942

11个回答

53

如果其他人也在寻找答案，我在这里分享一下，有些答案已经过时了。

在使用Visual Studio 2013进行一个小型Web项目的开发时，我想第一次使用SASS。经过一番搜索，我发现VS 2013 Update 2已经原生支持SASS（.scss）文件了。

再经过一番探索，由于没有使用SASS的经验，我安装了Web Essentials 2013 for Update 2来编译和生成相应的.css文件。

即便如此，我仍然不清楚它们是如何联系在一起的，但是这篇博客文章做出了很好的解释，适合初学者参考。

博客摘录（感谢@akatakritos）

Visual Studio 2013提供了添加SASS文件（.scss）的功能
安装Web Essentials 2013 for Update 2
添加一个新的.scss文件到你的项目中，例如styles.scss
更新styles.scss，保存，它会自动生成一个styles.css文件在.scss文件下面
然后你就可以像使用普通的.css文件一样进行捆绑或链接了

更新于2015年7月：

在稍后的Web Essentials更新中，即2014年11月12日的Update 4版本2.5中移除了SASS编译器。

备选编译器:

- Tanner

2

Web essentials 对我来说无法工作。有时它可以正常运行，但有时似乎会出现 SCSS 编译错误，但没有任何提示信息。 - Ethan Reesor

请更新您的答案，因为WebEssentials 2.5版本不再包含SASS编译器。 - Paweł Mach

2

Web Essentials for VS2013支持SASS转译。我正在使用最新版本2.6.36。我相信该支持仅在2015版本中被取消。 - pauloya

@pauloya 我稍后会查看并根据需要进行更新。 - Tanner

1

使用VS2015企业版，为了让这一切正常工作，我首先需要下载并安装[https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d]和[https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c]。故事：然后我必须重新启动VS2015，它才能正常工作。最初，在通过NuGet包管理器下载Web编译器后，重新启动VS2015，它无法加载/工作或将“compilerconfig.json”添加到我的项目根目录中。在下载和安装Web分析器之后，它可以正常工作。同一作者... - Eric Milliot-Martinez

显示剩余5条评论

12

我没有使用过Chirpy，但你还可以尝试其他几个选项。

我最喜欢的在 Visual Studio 上使用 Sass 的扩展是 Mindscape 的 Web Workbench。它与 Visual Studio 2013 集成良好，甚至支持 Compass。如果您使用 Less 或 CoffeeScript，它也会处理这些。我曾与其中一位开发人员聊过天，他非常负责和友好，这对我来说是一个巨大的加分项。哦，我还听说有更多很酷的东西正在开发中。
SassyStudio 是另一个选择，但当我尝试时，它似乎没有 Web Workbench 强大。
它还没有发布，但请关注 Web Essentials。目前它只支持 LESS 作为 CSS 预处理器，但是 Sass 支持已经得到了大量请求，程序经理回复说“全速进行开发”。希望很快！

最后一种选择，我很多时候都会使用外部工具来观察我的SASS文件，将它们编译在后台，并让Visual Studio在它们被编译时重新加载CSS文件。

通过命令行安装Ruby和SASS，并告诉它观察你的项目目录中的更改是可以的 - 但我非常喜欢Prepros这样的工具。

我没有尝试过所有的选项，但Scout、Koala、LiveReload、Compass.app和Fire.app也是类似的选择。

虽然这些不总是适合每个项目的正确解决方案，但它们给你很多灵活性和成熟度，你在Visual Studio扩展中可能找不到。希望这有所帮助！

- Christin White

6

截至 2014 年 3 月：这现在已经包含在 Web Essentials VS2013 Update 2 CTP 2 中。 - nitech

我真的很喜欢Mindscape的产品，但是由于我正在安装新电脑，我可能会尝试使用Web Essentials。 - Ads

我之前在做一些Sencha Touch的工作时，安装了Ruby和一些自动处理sass文件的工具，但我并不是很喜欢它。当时它还可以，而且也能用，但我更喜欢把所有的开发都放在一个地方完成。VS是一个非常好的工作环境，为什么要使用外部处理工具呢？此外，如果你没有其他需要使用Ruby的地方，为什么要安装它呢？ - Ads

如果你真的喜欢Visual Studio，那么一定要坚持使用集成解决方案，特别是现在选项已经非常成熟。然而，我并不是Visual Studio的铁粉，所以只有在必须使用它时才会使用它，我更愿意使用外部解决方案和Sublime Text。 - Christin White

5

要在Visual Studio中编译SCSS，需要安装CompileSass Visual Studio扩展。

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

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

请查看CompileSass。

- Sam Rueby

据我了解，它仍将支持编译Sass，只是会使用Visual Studio的编译器吗？ - Joseph Woodward

我不这么认为。Web Essentials 的作者（Mads Kristensen）在微软工作，他的建议是转换到 Grunt/Gulp，使用它的工具编译 Sass（Ruby，对吧？）。因此，上面的扩展提供了无需其他依赖项即可编译 Sass 的能力。 - Sam Rueby

这绝对是如何在Visual Studio中编译SCSS的最佳答案。该扩展功能强大且安装非常容易。 - Greg Gum

3

对于ASP.NET，有几种集成SASS的方式。 Chripy 是一个常用的插件，你需要在Visual Studio上安装它作为扩展。
通过设计时编译，你可以在 http://chirpy.codeplex.com/ 找到更多关于Chripy的信息。
另外，你还可以通过Nuget安装另一个包：

install-package SassAndCoffee

- Sirwan Afifi

谢谢，但我认为 Chripy 不支持 VS2013？ - Hamed mayahian

你确定在VS 2013中工作吗？ - Hamed mayahian

我不确定Chripy是否可行，但第二个在VS 2013中可以工作。 - Sirwan Afifi

2

我写了一篇关于这个主题的博客，我认为它可能会帮助其他人。基本上，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文件中存在破坏性错误。

- PW Kad

你已经解决了Compass的问题吗？另外，你尝试过集成Bourbon吗？如果是这样，它的工作效果如何？ - Jason Frank

1

我认为 Web Essentials 扩展程序——我假设每个网络开发人员都在使用并且是本机 VS IDE 支持的前兆——具有 SCSS 编译支持，但我认为它只适用于 VS2013 Update 2，目前仍处于 CTP 阶段。

- Luke Puplett

不行。Web Essentials与VS2013 Update 2 CTP（2014.04.23）不兼容，而Update 2本身具有对SCSS文件的原生支持。 - Daniel Leiszen

1

更新：WebEssentials 2.0 RC适用于VS 2013 Update 2。 - Daniel Leiszen

1

我知道这条评论可能已经没有用了，因为人们可能已经有了答案，但是Scout适用于Windows系统：），自2013年3月以来，我一直在我的项目中使用它。

你可以使用Mixture，它非常强大，并且可以创建CSS和JS文件的压缩版本。

- David Gebbett

0

如果您使用的是 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));
});

最后，在“任务运行器资源管理器”中，右键单击您的新任务sass，然后选择绑定，再选择构建后。

- Serj Sagan

0

Visual Studio的最新版本+Web Essentials的最新版本http://vswebessentials.com/download允许开箱即用Sass和Less。

- Arif Dewi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Spittles · Accepted Answer

Visual Studio 2013更新2

Visual Studio 2013更新2原生支持SCSS和LESS文件的语法。您可以创建SCSS或LESS文件，并查看这些文件类型的语法高亮和智能感知。 但是它没有提供编译方法。

以下是关于新功能的链接：

我们在VS2013 RTM中添加了LESS，现在我们有了SASS项目项和编辑器。SASS编辑器功能与LESS编辑器相当，包括着色、变量和混合IntelliSense、注释/取消注释、快速信息、格式化、语法验证、大纲、转到定义、颜色选择器、工具选项设置等。

请注意： 此更新似乎仅支持较新的SassyCSS语法。我尝试使用旧的缩进式SASS语法，但没有成功。

编译

Web Essentials。这是一个很棒的工具，可为您完成所有“琐碎”的工作。Visual Studio 2013更新3、4和5均提供更新版本。
另外一个免费的仅处理编译的工具是CompileSASS，它也适用于VS2015。
或者您可以使用MindScape's WebWorkbench，这是一个全功能的Web开发插件，支持Sass、LESS和CoffeeScript，可在Visual Studio 2013中使用。

伟大的工具，有很多不错的功能。有一个免费版本可以满足基本需求，但也有一个付费版本，更加全面（但在我看来，考虑到有更好的免费替代品，它有点太昂贵了）。

Visual Studio 2015

对于那些转向Visual Studio 2015的人，不幸的是，仍然没有原生支持SASS和LESS编译。而且不幸的是，Web Essentials将不再支持编译。

Web Essentials的作者Mads Kristensen在这里解释了这个决定的原因。

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

WebCompiler（免费）

Web Essentials的作者Mads Kristensen创建了一个独立的编译工具Web Compiler。您所要做的就是安装它，然后右键单击要编译的任何SASS文件，选择Web Compiler> Compile File。从那时起，它被监视，每当保存该文件时，就会编译该文件。

下载Web Compiler

CompileSASS（免费）

与Web Compiler类似，这是一个独立的扩展，被创建为VS2013和VS2015中受欢迎的Web Essentials扩展中删除了编译。它很轻巧，并且具有出色的错误报告功能。阅读作者关于该扩展的博客here。

下载编译SASS

Web Workbench（免费/付费）

Mindscape的Web Workbench是我多年来编译SASS时最喜欢的扩展，但现在我已经转向使用免费替代品。不过，专业版是一款功能强大的工具，有许多自定义输出文件的方法，但价格也相对较高（39美元），考虑到有免费工具可供选择。

下载Web WorkBench

Visual Studio Code

实际上与上述相同，它通过语法高亮和Intellisense直接支持SASS和LESS，但缺乏编译功能。

任何上面列出的编译器都可以使用，但如果您想手动设置编译，请参考下面的出色指南：

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