将 SASS 与 ASP.NET 结合使用

Question

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

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

Answer 1

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

然后，要在 ASP.NET 项目中编译 .sass/.scss 文件，可以使用一些不同的工具：通过 Web Essential , Web 工作台, SassC，Sass.Net，指南针，SassAndCoffee ...

---

Web Essential 一个功能齐全的 Visual Studio 插件，确实提供了更好的体验对于所有前端的东西。 最新版本开始支持Sass（SCSS语法）。 它在内部使用 Libsass 将 SCSS 编译为 CSS。

---

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

---

Sassy Studio：另一个插件视觉工作室。 功能较少但更轻。

---

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

Libsass 库有几个包装器：

• SassC：命令行编译器 (在 Windows 上，您需要使用 MsysGit 编译 SassC 源代码以获取 sassc.exe）。
• NSass：.Net 包装器。
• Node-Sass：在 Node.js 上使用 Libsass。

---

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

---

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

Answer 2

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

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

Answer 3

2015 年，我当前的建议是使用 Node.js （服务器端 Javascript 平台）和 gulp.js （任务运行器节点包），以及 gulp-sass（用于 gulp 实现 libsass 的节点包 - Ruby 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 文件创建 iconfonts
  • 缩小 js、css、SVG
  • 优化图像
  • 拯救鲸鱼
  • ...
• 为项目的新开发人员提供更简单的设置
  设置好项目 package.json 和 gulpfile.js 后，通常只需执行几个步骤即可开始运行：
  • 下载并安装Node.js
  • 运行npm install -g gulp（全局安装gulp）
  • 运行 npm install （在本地安装项目包）
  • 运行 gulp taskname （根据您如何设置 gulpfile.js taskname 将运行编译 SASS、Javascript 等的任务）< /em>

  
  

• 由 Visual Studio 2015 支持
  不管你相信与否，VS2015 现在可以为你处理所有命令行的东西！

在工作流程方面，您有几个典型的选项：

• 让您的开发人员将其编译的代码提交到存储库
  缺点：开发人员必须始终运行 gulp 或类似工具来编译可用于生产的资产

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

以下是我 2012 年的旧答案，为后代保留：

来自一位项目领先的前端开发人员，使用 Ruby、Python、
和 C# .NET，我有这些想法：

Sass 和 更少

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

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

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

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

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

您有几个选择：

• Sass：原生 Ruby + Sass
  • 专业版：最快的服务器编译
  • 专业版：能够使用最新版本的 Sass
  • 缺点：启动和运行非常麻烦
  • 缺点：每个服务器或工作站都需要进行 ruby​​ 设置
  • 缺点：.NET 开发人员更难解决 Ruby/集成问题
• Sass：Ruby .NET 端口，如 [IronRuby][5] + Sass
  • 优点：服务器编译速度慢（前端开发人员会抱怨！）
  • 专业版：可能无法使用最新版本的 Sass
  • 专业版：比 Native Ruby 稍微容易设置
  • 缺点：每个服务器或工作站都需要进行 ruby​​ 设置
  • 缺点：.NET 开发人员更难解决 Ruby/集成问题
• Sass：使用 [BundleTransformer][7] + Sass 扩展 [.NET 捆绑][8]
  • 专业版：（使用 IronRuby）服务器编译速度慢（前端开发人员会抱怨！）
  • 专业版：（使用 IronRuby）可能无法使用最新版本的 Sass
  • 专业版：（使用 IronRuby）比 Native 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 用户来说初始设置可能会很困难
  • 缺点：环境要求现在涉及托管虚拟机
  • 缺点：虚拟机可能存在可扩展性/维护问题

在我看来，使用 [DotLessCSS][6] 的 LESS 是您的最佳选择
由于上述原因，典型的 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/

Answer 4

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

Answer 5

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

Answer 6

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

https://github.com/xpaulbettsx/SassAndCoffee

Answer 7

我最初在此处回答了这个问题。

#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