如何在Visual Studio 2013中使用Sass \[关闭\]

visual-studio CSS

Jim老丝梅

2020-03-18

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

第2088篇《如何在Visual Studio 2013中使用Sass \[关闭\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
乐米亚 2020.03.18

在Visual Studio 2013 SP 4中,添加SCSS文件并在每次保存时进行同步都没有问题。同步失败时我感到困惑,我发现问题出在定义变量之前。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;

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

Mandy小小 2020.03.18

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

西门Green 2020.03.18

我认为Web Essentials扩展-我假设每个Web开发人员都在运行,并且是本地VS IDE支持的先驱-具有SCSS编译支持,但我认为它仅适用于仍在CTP中的VS2013 Update 2。这次。

神乐古一 2020.03.18

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

您可以使用功能强大的Mixture,并创建CSS和JS文件的缩小版本。

A樱 2020.03.18

我写了一篇有关该主题的博客文章,我认为这可能会对其他人有所帮助。基本上支持SCSS,但不支持SASS扩展。

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

也要小心,因为我在编译Compass时遇到了一些问题,例如指南针/ css3 / images文件中存在中断错误。

Mandy伽罗神无 2020.03.18

对于ASP.NET,有两种方法可以与SASS集成。Chripy是一个常见的插件,您希望将其安装在Visual Studio中作为扩展。
从而进行设计时编译,您可以在http://chirpy.codeplex.com/中找到有关chripy的更多信息
以及可以通过Nuget安装的另一个软件包:

install-package SassAndCoffee
泡芙伽罗小卤蛋 2020.03.18

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

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

I thought this was pretty sad because it was absolutely the simplest way to compile Sass from Visual Studio. I created a new Visual Studio extension that behaves the same way. You just install the extension and it will automatically compile .scss files to compressed .min.css files when you save.

Check out CompileSass.

逆天飞云 2020.03.18

我没有使用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这种事情。

我还没有尝试全部,但ScoutKoalaLiveReloadCompass.appFire.app也是类似的选项。

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

希望对您有所帮助!

前端梅 2020.03.18

对于寻求此答案的其他任何人,我发布此邮件是为了节省您的时间,因为某些答案有些过时了。

在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更新2
  3. .scss向您的项目添加一个新文件,例如styles.scss
  4. 更新styles.scss,保存,它将自动styles.css在该.scss文件生成一个文件
  5. 然后,您可以像常规.css文件一样捆绑或链接它

2015年7月更新:

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

备用编译器:

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android