在ASP.NET中使用SASS

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

什么是这种整合的最佳途径? 或者,还有其他更适合.NET环境的CSS生成工具吗?

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

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


Web Essential是一个全function的Visual Studio插件,它可以为所有的前端工作提供更好的体验。 最新版本开始支持Sass(SCSS语法)。 它在内部使用Libsass将SCSS编译为CSS。


Web Workbench是Visual Studio的另一个插件,可以添加语法突出显示,intellisence和一些其他用于编辑SCSS文件的有用内容。 它也可以将你的代码编译成正常或缩小的CSS。 它在内部使用Ruby Sass编译器的包装版本。


Sassy Studio :Visual Studio的另一个插件。 function较less,但更轻。


Libsass库是Sass CSS预编译器的C ++端口(仍在开发中)。 原始版本是用Ruby编写的,但是这个版本是为了提高效率和可移植性。 这个图书馆力求轻松,简单,易于构build和集成各种平台和语言。

Libsass库周围有几个包装器:

  • SassC :一个命令行编译器(在Windows上,您需要使用MsysGit编译SassC的源以获取sassc.exe)。
  • NSass :.Net包装。
  • Node-Sass :在Node.js上使用Libsass
  • 等等

Compass是Sass的一个框架,它增加了很多有用的帮手(比如图片精灵),并且还可以编译你的SCSS / Sass。 但是您需要在需要编译样式的每个开发环境中安装Ruby。


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

指南针项目有一个编译器,将编译您的CSS到CSS。 它是build立在Windows上运行的,但是在这个平台上没有很好的testing。 如果你发现任何平台相关的错误,我会很乐意帮你修复它们。

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

在2015年,我现在的build议是使用Node.js (服务器端Javascript平台)和gulp.js (一个任务运行节点包)以及gulp.js gulp-sass (一个节点包,用于实现libsass吞吐量 – 一个快速C端口Ruby SASS)。

你可以开始这样的教程 。

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

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

  • 节点现在stream行前端工具
    现在许多Web开发人员正在使用Node作为前端Web开发任务的平台。 无论是Grunt,Gulp,JSPM,Webpack还是别的什么 – 现在都是在npm中发生的。
    你可以用npm包做的事情:
    • 使用Sass,Less,PostCSS等编译样式
    • 连接Javascript,CSS,HTML模板等等
    • 将其他版本的JS和ES6-7,Typescript,Coffeescript写入ES5
    • 从本地SVG文件创buildiconfonts
    • 将js,css,SVG缩小
    • 优化图像
    • 拯救鲸鱼
  • 为项目的新开发人员设置更简单
    一旦你build立了你的项目package.jsongulpfile.js ,运行它通常需要几个步骤:
    • 下载并安装Node.js
    • 运行npm install -g gulp (全局安装gulp)
    • 运行npm install (在本地安装项目包)
    • 运行gulp taskname (取决于你如何设置你的gulpfile.js任务名将运行一个编译你的SASS,Javascript等的任务)
  • 受Visual Studio 2015支持
    相信与否,VS2015现在可以为您处理所有的命令行工具!

在工作stream方面你有几个典型的select:

  • 让开发人员将他们的编译代码提交到存储库
    下行:开发商必须经常运行gulp或类似的工作来编译生产准备资产

  • 您的build | stage | production服务器在发布之前运行gulp任务
    这样设置起来可能会更复杂,但意味着工作是经过validation的,并且是从未编译的源代码生成的。

以下是我2012年以前的答案,留给后人:

从使用Ruby,Python和C#.NET的项目领先的前端开发人员,我有这样的想法:

Sass&LESS

我更喜欢在新项目上使用[Sass] [1],特别是在精彩的[Compass框架] [2]上。 指南针是一个伟大的工作,并为我的过程增加了很多价值。 Sass有一个很好的社区,OK文档和一个强大的function集。 Sass是一个Ruby库。

Sass的替代品是[LESS] [3]。 它具有类似的语法和function,但社区较小,文档稍好。 less了一个JS库。

从趋势上看,随着时间的推移,随着时间的推移,人们往往倾向于Sass,即使支持CSS Level 4特性。 但是LESS仍然是完全可用的,并且容易增加足够的价值以保证使用它。

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

虽然我更喜欢使用Sass,但是让Ruby / Sass与.NET项目一起工作可能会非常痛苦,因为很难设置外部的,并可能使开发人员感到挫败。

你有几个select:

  • Sass:原生Ruby + Sass
    • 临:最快的服务器编译
    • 专业版:可以使用最新版本的Sass
    • 骗子:起床和跑步非常麻烦
    • Con:每个服务器或工作站都需要设置ruby
    • Con: .NET开发人员更难以解决Ruby /集成问题
  • Sass:类似于[IronRuby] [5] + Sass的Ruby .NET端口
    • 临: SLOW服务器编译(前端开发人员会抱怨!)
    • 专业版:可能无法使用最新版本的Sass
    • 专业版:比原生Ruby更容易安装
    • Con:每个服务器或工作站都需要设置ruby
    • Con: .NET开发人员更难以解决Ruby /集成问题
  • Sass:用[BundleTransformer] [7] + Sass扩展[.NET Bundling] [8]
    • 临:(使用IronRuby)SLOW服务器编译(Frontend Devs会抱怨!)
    • 临:(使用IronRuby)可能无法使用最新版本的Sass
    • 临:(使用IronRuby)比原生Ruby更容易设置
    • Con:每个服务器或工作站都需要设置ruby
    • Con: .NET开发人员更难以解决Ruby /集成问题
  • Sass或LESS:Visual Studio插件,如[Mindscape Workbench] [4]
    • 临:容易上手
    • 临:快速编译
    • Con:每个使用Sass风格的开发者都需要一个IDE插件
    • Con:无法快速更改服务器上的样式 – 需要本地重新处理
  • LESS:.NET端口像[DotLessCSS] [6]
    • Pro:快速编译服务器
    • Pro:非常容易设置
    • 专业版:对C#.NET开发者来说很舒服
    • 临:没有IDE /工作站/服务器的要求 – 将其包含在Web应用程序本身
    • Con:没有SASS / Compass的多function性,并不能保证最新的LESS.JS语法兼容性
  • Sass:用[Vagrant] [9]虚拟化linux + Ruby
    • Pro:并不像你想象的那样可怕
    • 临:快!
    • 临:最新的前端工具(Sass,Compass等),更新与Linux包pipe理器
    • Con:对于非linux用户来说,初始化安装可能很困难
    • Con:环境要求现在涉及托pipe一个虚拟机
    • Con:虚拟机可能具有可伸缩性/维护问题

在我看来,由于上述原因,使用[DotLessCSS] [6]是最好的select。

几年前,我发现[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端口。 指南针看起来非常有趣,而且我认为像Less这样的东西会是一个很好的补充。

我昨天刚刚发现,看起来相当有希望,除了sass / scss,它将处理JS的自主化(还没有CSS)和文件的组合。 我希望有一件事是为了创build一个VS插件来编辑sass / scss文件。 我发现的问题是,当你的sass / scss代码出现错误时,你只会发现它正在testing或检查生成的CSS文件。 我还没有完成所有的步骤,但迄今为止这么好。

https://github.com/xpaulbettsx/SassAndCoffee

我原来在这里回答了这个问题。

 #PostBuild.rb #from http://sentia.com.au/2008/08/sassing-a-net-application.html #Post-build event command line: rake -f "$(ProjectDir)PostBuild.rb" require 'haml' require 'sass' task :default => [ :stylesheets ] desc 'Regenerates all sass templates.' task :stylesheets do wd = File.dirname(__FILE__) sass_root = File.join(wd, 'Stylesheets') css_root = File.join(wd, 'Content') Dir[sass_root + '/*.sass'].each do |sass| css = File.join(css_root, File.basename(sass, '.sass') + '.css') puts "Sassing #{sass} to #{css}." File.open(css, 'w') do |f| f.write(Sass::Engine.new(IO.read(sass)).render) end end end