在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.json和gulpfile.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文件。 我还没有完成所有的步骤，但迄今为止这么好。
我原来在这里回答了这个问题。
#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
