在ASP.NET中使用SASS

我正在研究如何在ASP.NET环境中使用Ruby HAML包中的SASS(Syntactically Awesome StyleSheets).理想情况下,我希望将SASS文件编译成CSS,使其成为构建过程的无缝部分.

这种整合的最佳方法是什么？或者,是否有其他CSS生成工具更适合.NET环境？

为了在Visual Studio中获得更好的工作体验,您可以安装最新版本的Web Essential,它开始支持Sass(SCSS语法).
或者,您可以安装Sassy Studio或Web Workbench.

然后在ASP.NET项目中编译.sass/.scss文件,有一些不同的工具:通过Web Essential,Web Workbench,SassC,Sass.Net,Compass,SassAndCoffee ......

Web Essential是Visual Studio的一个功能齐全的插件,它真正为所有前端内容提供了更好的体验.最新版本开始支持Sass(SCSS语法).在内部,它使用Libsass将SCSS编译为CSS.

Web Workbench是Visual Studio的另一个插件,它添加了语法高亮,intellisence和一些其他有用的东西来编辑SCSS文件.它还可以将您的代码编译为普通或缩小的CSS.在内部,它使用了Ruby Sass编译器的包装版本.

Sassy Studio:Visual Studio的另一个插件.功能较少,但更轻.

该Libsass库是C++的萨斯CSS预编译器(开发中仍然)的端口.原始版本是用Ruby编写的,但这个版本是为了提高效率和可移植性.该库力求轻松,简单,易于构建,并与各种平台和语言集成.

Libsass库周围有几个包装器:

SassC:命令行编译器(在Windows上,您需要使用MsysGit编译SassC的源代码以获取sassc.exe).

NSass:一个.Net包装器.

Node-Sass:在Node.js上使用Libsass.

等等

Compass是Sass的一个框架,它添加了许多有用的帮助程序(比如图像spriting),也可以编译你的SCSS/Sass.但是您需要在需要编译样式的每个开发环境中安装Ruby.

SassAndCoffee是一个通过一些DLL和配置添加SCSS/Sass编译和缩小支持的软件包.它优于Web Workbench编译器,它是Visual Studio解决方案中的自包含:您不需要在每个开发环境中安装插件.备注:SassAndCoffee不经常更新,因为它使用IronRuby来包装官方Ruby编译器,所以可能会遇到一些性能问题.您可以通过 Nuget包安装最新版本.

指南针项目有一个编译器,可以将你的sass编译为css.它是为在Windows上运行而构建的,但在该平台上没有经过良好测试.如果您发现任何与平台相关的错误,我很乐意帮您修复它们.

指南针可以在这里找到:http://github.com/chriseppsein/compass

在2015年,我目前的建议是使用Node.js(服务器端Javascript平台)和gulp.js(任务运行程序节点包),以及gulp-sass(用于实现libsass的gulp的节点包- Ruby SASS的快速C端口).

您可以开始使用这样的教程.

喜欢捆绑？Bundle Transformer现在最终使用libsass,实现高速编译.

这就是为什么我认为你应该使用Node和Gulp.

节点现在很受欢迎前端工具
许多Web开发人员现在正在使用Node作为前端Web开发任务的平台.无论是Grunt,Gulp,JSPM,Webpack还是别的什么 - 它现在都在npm发生.
你可以用npm包做的事情:

使用Sass,Less,PostCSS等编译样式

连接Javascript,CSS,HTML模板等

编写其他版本的JS并将ES6-7,Typescript,Coffeescript转换为ES5

从本地SVG文件创建图标字体

缩小js,css,SVG

优化图像

拯救鲸鱼

...

新开发的项目更简单的设置
一旦你建立你的项目package.json和gulpfile.js所有它通常需要得到运行的是以下几个步骤:

下载并安装Node.js.

运行npm install -g gulp (全局安装gulp)

运行npm install (在本地安装项目包)

运行gulp taskname (根据您设置gulpfile.js任务名称的方式将运行编译SASS,Javascript等的任务)

Visual Studio 2015支持
信不信由你,VS2015现在可以为您处理所有命令行内容!

在工作流程方面,您有几个典型的选择:

让开发人员将编译后的代码提交到存储库.
缺点:开发人员必须始终运行gulp或类似编译生产就绪资产

您的构建|阶段|生产服务器在发布之前运行gulp任务
这种方式设置起来可能更复杂,但意味着工作已经过验证,并且是从未编译的源构建的.

以下是我2012年的旧答案,为后人保留:

来自使用Ruby,Python和C#.NET的项目领先的前端开发人员,我有以下想法:

Sass&LESS

我更喜欢在新项目中使用[Sass] [1],特别是使用精彩的[Compass框架] [2].Compass是一项伟大的工作,为我的流程增添了很多价值.Sass有一个很棒的社区,OK文档和强大的功能集.Sass是一个Ruby库.

Sass的另一种选择是[LESS] [3].它具有类似的语法和功能,但是更小的社区和更好的文档.少了一个JS库.

从趋势的角度来看,随着时间的推移,人们倾向于向Sass发展,因为它很发达,甚至支持CSS Level 4功能.但LESS仍然完全可用,并且很容易增加足够的价值以保证使用它.

在ASP.NET项目中使用Sass/LESS

虽然我更喜欢使用Sass,但让Ruby/Sass与.NET项目一起工作可能会很痛苦,因为它很难设置,异常,并且会让开发人员感到沮丧.

你有几个选择:

Sass:原生Ruby + Sass

专业版:最快的服务器编译

Pro:能够使用最新版本的Sass

骗局:起床和跑步非常麻烦

Con:每台服务器或工作站都需要设置ruby

Con: Harder for .NET开发人员解决Ruby /集成问题

Sass:Ruby .NET端口,如[IronRuby] [5] + Sass

Pro: SLOW服务器编译(Frontend Devs会抱怨!)

Pro:可能无法使用最新版本的Sass

Pro:比Native Ruby更容易设置

Con:每台服务器或工作站都需要设置ruby

Con: Harder for .NET开发人员解决Ruby /集成问题

Sass:用[BundleTransformer] [7] + Sass扩展[.NET Bundling] [8]

Pro :(使用IronRuby)SLOW服务器编译(Frontend Devs会抱怨!)

Pro :(使用IronRuby)可能无法使用最新版本的Sass

Pro :(使用IronRuby)比Native Ruby更容易设置

Con:每台服务器或工作站都需要设置ruby

Con: Harder for .NET开发人员解决Ruby /集成问题

Sass或LESS:Visual Studio插件,如[Mindscape Workbench] [4]

专业:易于上手

亲:快速编译

Con:每个使用Sass样式的开发人员都需要一个IDE插件

Con:无法快速更改服务器上的样式 - 需要本地重新处理

少:像[DotLessCSS] [6]这样的.NET端口

Pro:快速服务器编译

Pro:非常容易设置

Pro:对C#.NET开发者来说很舒服

Pro:无IDE /工作站/服务器要求 - 将其包含在Web应用程序本身中

Con:没有SASS/Compass的多功能性,并不能始终保证最新的LESS.JS语法兼容性

Sass:使用[Vagrant]虚拟化linux + Ruby [9]

亲:设置不像你想象的那么可怕

亲:快!!

Pro:最新的前端工具(Sass,Compass等),用linux包管理器更新

Con:对于非Linux用户来说,初始设置可能很困难

Con:环境要求现在涉及托管VM

Con: VM可能存在可伸缩性/维护问题

在我看来,由于上述原因,使用[DotLessCSS] [6]的LESS是典型Web开发项目的最佳选择.

几年前,我发现[DotLessCSS] [6]有令人讨厌的错误和限制,但是在2012年的一些项目中再次使用[DotLessCSS] [6],我对设置非常满意.我没有通过使用Sass/Ruby向我的开发人员介绍痛苦,并从LESS获得大部分价值.最重要的是,没有IDE或工作站要求.

[1]:http://sass-lang.com/ [2]:http : //compass-style.org/ [3]:http://lesscss.org/ [4]: http:// www. mindscapehq.com/products/web-workbench [5]:http: //www.ironruby.net/ [6]:http://www.dotlesscss.org/ [7]:http: //bundletransformer.codeplex.com / [8]:http: //weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx [9]:http://www.vagrantup.com/

我刚刚编写了一个Visual Studio加载项,其中包含详细说明,包括如何让Sass用于Visual Studio的截图.在这里查看 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

它不是SASS,但你可以看看我们的Less Css for .NET端口.Compass看起来真的很有趣,我觉得Less之类的东西会是一个很好的补充.

我昨天刚刚发现这个,它看起来很有希望,除了sass/scss之外它还将处理JS(不是CSS)的自动化和文件组合.有一件事我希望有人在那里创建一个VS插件来编辑sass/scss文件.我发现有问题的是,当你的sass/scss代码出错时,你只会发现它正在测试或检查生成的CSS文件.我没有全力以赴,但到目前为止还不错.

https://github.com/xpaulbettsx/SassAndCoffee