在 ASP.NET 中使用 SASS [关闭]答案

【问题标题】：Using SASS with ASP.NET [closed]在 ASP.NET 中使用 SASS [关闭]
【发布时间】：2010-10-22 06:13:47
【问题描述】：

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

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

【问题讨论】：

我昨天在 HN 读到了这篇文章，想知道这些工具的使用范围有多广
我正在考虑将 SASS 集成到我们的 Maven 脚本中。有没有人尝试过使用 Maven Ruby 插件？
我不明白这个问题怎么不是“建设性的”。在问题中没有要求将 SASS 与 LESS（或其他任何东西）进行比较。下面的答案对想了解在 .NET 中使用 SASS 有哪些选项的我非常有帮助。
我也不同意这个被关闭。在快节奏的 Web 开发世界中，最佳实践通常来自开发人员本身，而不是某个管理机构！

【解决方案1】：

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

你可以开始with a tutorial like this。

更喜欢捆绑？ 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 & LESS

我更喜欢在新项目中使用 [Sass][1]，尤其是使用精彩的[指南针框架][2]。指南针是一项伟大的工作，并为我的流程增加了很多价值。 Sass 有一个很棒的社区，OK 文档和强大的功能集。 Sass 是一个 Ruby 库。

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

从趋势上看，随着时间的推移，人们倾向于使用 Sass 开发良好，甚至支持 CSS 4 级功能。但 LESS 是仍然完全可用，并且很容易增加足够的价值来保证使用它。

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

虽然我更喜欢使用 Sass，但让 Ruby/Sass 与 .NET 一起工作项目可能会很痛苦，因为它很难设置，外国的，并且可以挫败开发者。

你有几个选择：

Sass：原生 Ruby + Sass

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

专业版：能够使用最新版本的 Sass

缺点：启动和运行非常麻烦

缺点：每台服务器或工作站都需要设置 ruby

缺点： .NET 开发人员更难解决 Ruby/集成问题

Sass：Ruby .NET 移植，如 [IronRuby][5] + Sass

专业人士：服务器编译速度慢（前端开发人员会抱怨！）

专业人士：可能无法使用最新版本的 Sass

专业版：比原生 Ruby 更容易设置

缺点：每台服务器或工作站都需要设置 ruby

缺点： .NET 开发人员更难解决 Ruby/集成问题

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

专业人士：（使用 IronRuby）服务器编译速度慢（前端开发人员会抱怨！）

专业人士：（使用 IronRuby）可能无法使用最新版本的 Sass

专业版：（使用 IronRuby）比原生 Ruby 更容易设置

缺点：每台服务器或工作站都需要设置 ruby

缺点： .NET 开发人员更难解决 Ruby/集成问题

Sass 或 LESS：Visual Studio 插件，例如 [Mindscape Workbench][4]

专业版：易于上手

专业版：快速编译

缺点：每个使用 Sass 样式的开发人员都需要一个 IDE 插件

缺点：无法在服务器上快速更改样式 - 需要本地重新处理

LESS：.NET 端口，如 [DotLessCSS][6]

专业：快速服务器编译

专业版：非常容易设置

专业版： 对 C# .NET 开发人员来说很舒服

专业人士： 无 IDE/工作站/服务器要求 - 将其包含在网络应用程序本身中

缺点：没有SASS/Compass的通用性，不能总保证最新的LESS.JS语法兼容

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

专业人士：设置并没有您想象的那么可怕

专业人士： 快！！

专业版： 最新的前端工具（Sass、Compass 等），使用 linux 包管理器进行了更新

缺点：对于非 Linux 用户来说，初始设置可能很困难

缺点：环境要求现在涉及托管 VM

缺点：虚拟机可能存在可扩展性/维护问题

在我看来，LESS 使用 [DotLessCSS][6] 是您的最佳选择典型的 Web 开发项目，原因如上所述。

几年前，我发现 [DotLessCSS][6] 有烦人的错误和限制，但在 2012 年再次使用 [DotLessCSS][6] 项目，我对设置非常满意。我没有引入痛苦我的开发人员使用 Sass/Ruby 并从中获得大部分价值较少的。最重要的是，没有 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/

【讨论】：

在Bundle Transformer 1.9.81 中，由于转换为libSass，BundleTransformer.SassAndScss 模块的性能显着提高。
Andrey，我记得几年前尝试使用 BundleTransformer 时你的名字！我为此添加了一条注释，因为它更适合某些开发人员。

【解决方案2】：

我昨天才发现这个，它看起来很有前途，除了 sass/scss 之外，它还可以处理 JS 的自动化（还不是 CSS）和文件的组合。我希望有人能创建一个用于编辑 sass/scss 文件的 VS 插件。我确实发现有问题的是，当您的 sass/scss 代码中有错误时，您只会发现它在测试或检查生成的 CSS 文件。我还没有完成所有的步骤，但到目前为止还不错。

https://github.com/xpaulbettsx/SassAndCoffee

【讨论】：

【解决方案3】：

为了在 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 library 是 Sass CSS 预编译器的 C++ 端口（仍在开发中）。最初的版本是用 Ruby 编写的，但这个版本是为了提高效率和可移植性。该库力求轻巧、简单、易于构建并与各种平台和语言集成。

Libsass 库周围有几个包装器：

SassC：命令行编译器（在 Windows 上需要用 MsysGit 编译 SassC 的源代码才能得到 sassc.exe）。
NSass：.Net 包装器。
Node-Sass：在 Node.js 上使用 Libsass。
等

Compass 是一个 Sass 框架，它添加了许多有用的助手（如图像精灵），还可以编译你的 SCSS/Sass。但是您需要在需要编译样式的每个开发环境中安装 Ruby。

SassAndCoffee 是一个通过一些 DLL 和配置添加 SCSS/Sass 编译和缩小支持的包。与 Web Workbench 编译器相比，它的优势在于它独立于您的 Visual Studio 解决方案中：您无需在每个开发环境中都安装插件。备注：SassAndCoffee 不经常更新，因为它使用 IronRuby 封装了官方的 Ruby 编译器，可能会遇到一些性能问题。您可以通过Nuget package 安装最新版本。

【讨论】：

对可用的两个选项进行了很好的总结。

【解决方案4】：

它不是 SASS，但您可以查看我们的 Less Css for .NET 端口。不过 Compass 看起来真的很有趣，我认为对于 Less 来说这样的东西会是一个很好的补充。

【讨论】：

【解决方案5】：

我刚刚编写了一个带有详细说明的 Visual Studio 插件，包括有关如何让 Sass 用于 Visual Studio 的屏幕截图。在这里查看 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

【讨论】：

【解决方案6】：

我最初回答了这个问题here。

#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

【讨论】：

【解决方案7】：

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

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

【讨论】：

指南针做得很好，看起来真的很棒。
感谢您的回答——我明天会调查一下