在ASP.NET中使用SASS

我正在研究在ASP.NET环境中使用Ruby HAML包中的SASS（语法上很棒的StyleSheets）的方法。理想情况下，我希望将SASS文件编译为CSS是构建过程中的一个无缝部分。

进行集成的最佳方法是什么？另外，还有其他CSS生成工具更适合.NET环境吗？

为了在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是Visual Studio的功能齐全的插件，它确实为所有前端内容提供了更好的体验。最新版本开始支持Sass（SCSS语法）。在内部，它使用Libsass将SCSS编译为CSS。

Web Workbench是Visual Studio的另一个插件，它添加了语法突出显示，智能和其他一些用于编辑SCSS文件的有用内容。它还可以将您的代码编译为普通或精简的CSS。在内部，它使用了Ruby Sass编译器的包装版本。

Sassy Studio：Visual Studio的另一个插件。功能较少，但重量较轻。

该Libsass库是萨斯CSS预编译器（开发中仍然）的C ++接口。原始版本是用Ruby编写的，但是此版本旨在提高效率和可移植性。该库力求轻便，简单，易于构建，并与各种平台和语言集成。

Libsass库周围有几个包装器：

• SassC：命令行编译器（在Windows上，您需要使用MsysGit编译SassC的源代码以获取sassc.exe）。
• NSass：.Net包装器。
• 节点萨斯：在Node.js上使用Libsass。
• 等等

Compass是Sass的框架，它添加了许多有用的帮助程序（例如图像拼接），并且还可以编译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（用于gulp实现libsass的节点程序包） SASS的快速C端口）。

您可以从这样的教程开始。

更喜欢捆绑？现在，Bundle Transformer最终使用libsass，从而实现了高速编译。

这就是为什么我认为您应该使用Node和Gulp的原因。

• Node在前端工具中现在很流行，
  许多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] [1]，尤其是在出色的[Compass framework] [2]上。指南针是一项伟大的工作，并为我的过程增加了很多价值。Sass拥有一个不错的社区，确定的文档和强大的功能集。Sass是一个Ruby库。

Sass的替代方法是[LESS] [3]。它具有相似的语法和功能，但是社区较小，文档更好。少一个JS库。

从趋势的角度来看，随着Sass的不断发展，人们倾向于使用Sass，甚至支持CSS Level 4功能。但是LESS仍然可以完美使用，并且可以轻松添加足够的价值以保证使用它。

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

尽管我更喜欢使用Sass，但是让Ruby / Sass与.NET项目一起工作可能会很痛苦，因为它很难设置，太过陌生并且会使开发人员感到沮丧。

您有几种选择：

• Sass：本机Ruby + Sass
  • 专业版：最快的服务器编译
  • 专业版：能够使用最新版本的Sass
  • 缺点：极大的麻烦来启动和运行
  • 缺点：每个服务器或工作站都需要设置ruby
  • 缺点： .NET开发人员很难解决Ruby /集成问题
• Sass：像[IronRuby] [5]一样的Ruby .NET端口+ Sass
  • Pro：服务器编译缓慢（前端开发人员会抱怨！）
  • 专业版：可能无法使用最新版本的Sass
  • 优点：比本机Ruby容易设置
  • 缺点：每个服务器或工作站都需要设置ruby
  • 缺点： .NET开发人员很难解决Ruby /集成问题
• Sass：使用[BundleTransformer] [7] + Sass扩展[.NET Bundling] [8]
  • Pro ：（使用IronRuby）SLOW服务器编译（前端开发人员会抱怨！）
  • 专业人士：（使用IronRuby）可能无法使用最新版本的Sass
  • Pro ：（使用IronRuby）比Native Ruby容易设置
  • 缺点：每个服务器或工作站都需要设置ruby
  • 缺点： .NET开发人员很难解决Ruby /集成问题
• Sass或LESS：Visual Studio插件，例如[Mindscape Workbench] [4]
  • 优点：易于上手
  • Pro：快速编译
  • 缺点：每个使用Sass样式的开发人员都需要一个IDE插件
  • 缺点：无法快速更改服务器上的样式-需要本地重新处理
• 较少：.NET端口，例如[DotLessCSS] [6]
  • Pro：快速服务器编译
  • Pro：非常容易设置
  • 专业版：适合C＃.NET开发人员
  • 专业版：不需要IDE /工作站/服务器-将其包含在Web应用程序中
  • 缺点：还没有SASS / Compass的多功能性，并且不能总是保证最新的LESS.JS语法兼容性
• Sass：使用[Vagrant] [9]虚拟化linux + Ruby
  • 优点：设置不像您想象的那么可怕
  • 优点：快！
  • Pro：最新的前端工具（Sass，Compass等），已使用Linux软件包管理器更新
  • 缺点：非Linux用户可能难以进行初始设置
  • 缺点：环境要求现在涉及到托管虚拟机
  • 缺点： 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，但您可以看看我们的.NET端口的Less Css。指南针看起来真的很有趣，我认为Less这类的东西会是一个很好的补充。

我昨天才发现，它看起来很有希望，除了sass / scss之外，它还可以处理JS（尚未CSS）和文件组合的自动最小化。我希望的一件事是为外面的人创建一个VS插件，用于编辑sass / scss文件。我确实发现了一个问题，那就是当您的sass / scss代码出错时，您只会发现它在测试或检查生成的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