104

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

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

4

7 回答 7

42

为了在 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 库是 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 包安装最新版本。

于 2012-01-24T03:49:44.317 回答
26

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

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

于 2009-04-28T15:11:28.997 回答
25

在 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 文件创建图标字体
    • 缩小 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 的项目领先的前端开发人员那里，我有以下想法：

萨斯 & LESS

我更喜欢在一个新项目中使用 [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
    • Pro：最快的服务器编译
    • 优点：能够使用最新版本的 Sass
    • 缺点：启动和运行非常麻烦
    • 缺点：每个服务器或工作站都需要设置 ruby
    • 缺点： .NET 开发人员更难解决 Ruby/集成问题
  • Sass：Ruby .NET 端口，如 [IronRuby][5] + Sass
    • 优点：服务器编译慢（前端开发人员会抱怨！）
    • Pro：可能无法使用最新版本的 Sass
    • 优点：比 Native Ruby 更容易设置
    • 缺点：每个服务器或工作站都需要设置 ruby
    • 缺点： .NET 开发人员更难解决 Ruby/集成问题
  • Sass：使用 [BundleTransformer][7] + Sass 扩展 [.NET Bundling][8]
    • 优点：（使用 IronRuby）服务器编译慢（前端开发人员会抱怨！）
    • Pro：（使用 IronRuby）可能无法使用最新版本的 Sass
    • Pro：（使用 IronRuby）比 Native Ruby 更容易设置
    • 缺点：每个服务器或工作站都需要设置 ruby
    • 缺点： .NET 开发人员更难解决 Ruby/集成问题
  • Sass 或 LESS：Visual Studio 插件，如 [Mindscape Workbench][4]
    • 优点：容易上手
    • 优点：快速编译
    • 缺点：每个使用 Sass 样式的开发人员都需要一个 IDE 插件
    • 缺点：无法在服务器上快速更改样式 - 需要本地重新处理
  • LESS：.NET 端口，如 [DotLessCSS][6]
    • 优点：快速服务器编译
    • 优点：非常容易设置
    • 优点：对 C# .NET 开发人员来说很舒服
    • Pro：没有 IDE/工作站/服务器要求 - 将其包含在 Web 应用程序本身中
    • 缺点：没有 SASS/Compass 的多功能性，不能总是保证最新的 LESS.JS 语法兼容性
  • Sass：使用 [Vagrant][9] 虚拟化 linux+Ruby
    • 优点：设置没有你想象的那么可怕
    • 亲：快！！
    • Pro：最新的前端工具（Sass、Compass 等），使用 linux 包管理器进行了更新
    • 缺点：对于非 Linux 用户来说，初始设置可能很困难
    • 缺点：环境要求现在涉及托管 VM
    • 缺点： 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/

于 2012-11-26T15:08:43.613 回答
13

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

于 2011-01-21T15:51:10.280 回答
11

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

于 2009-10-17T10:39:23.653 回答
5

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

https://github.com/xpaulbettsx/SassAndCoffee

于 2011-07-07T17:04:25.207 回答
4

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

#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
于 2009-10-17T10:52:41.003 回答