使用SASS与ASP.NET

Question

使用SASS与ASP.NET

asp.netcsssass

105

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

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

- Guðmundur H

我昨天在 HN 上读到了这个，想知道这种工具的广泛使用程度如何。 - Surya

我正在研究将SASS集成到我们的Maven脚本中。有人尝试过使用Maven Ruby插件吗？ - Christopher Tokar

3

我不明白为什么这个问题不被认为是“建设性”的。问题中并没有要求比较SASS和LESS（或其他任何东西）。下面的回答对我来说非常有帮助，因为我想知道在.NET中使用SASS的选项是什么。 - Calvin

1

我也不同意这个被关闭。在快节奏的Web开发世界中，最佳实践通常来自开发人员本身，而不是某个管理机构！ - Phil Ricketts

7个回答

26

Compass项目有一个编译器，可以将你的sass编译成css。该编译器是为Windows系统构建的，但在该平台上并未进行充分测试。如果您发现任何与平台相关的错误，我很乐意帮助您解决。

您可以在这里找到Compass：http://github.com/chriseppsein/compass

- chriseppstein

指南针做得很棒，看起来真棒。 - Surya

谢谢回答 - 我明天会研究一下。 - Guðmundur H

24

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，taskname将运行编译您的SASS，JavaScript等的任务）
被Visual Studio 2015支持
信不信由你，VS2015现在可以为您处理所有命令行工具！

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

让开发人员将编译后的代码提交到存储库
缺点：开发人员必须始终运行gulp或类似工具来编译生产就绪的资源。
在发布前，您的构建|阶段|生产服务器运行 gulp 任务
这种方式可能更复杂，但意味着工作是从未编译的源代码中验证和构建的。

以下是我2012年的旧答案，仅供参考：

一个领导项目的前端开发人员，使用Ruby，Python和C# .NET，有以下想法：

Sass和LESS

我更喜欢在新项目中使用[Sass][1]，特别是与[Compass框架][2]一起使用。 Compass是一个很棒的作品，为我的工作流程增添了很多价值。 Sass拥有众多的社区，文档还可以，功能强大。 Sass是一个Ruby库。

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

趋势上，人们倾向于随着时间的推移而转向Sass，因为它得到了良好的发展，甚至支持CSS Level 4功能。但是LESS仍然完全可用，并且很容易添加足够的价值来保证使用它。

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

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

你有几个选择：

- Sass：本地Ruby + Sass

* Pro：最快的服务器编译 * Pro：能够使用最新版本的Sass * Con：非常麻烦，难以启动 * Con：每个服务器或工作站都需要设置Ruby * Con：对于.NET开发人员来说更难解决Ruby/集成问题

- Sass：类似[IronRuby][5] + Sass的Ruby .NET端口

* Pro：SLOW服务器编译（前端开发人员会抱怨！） * Pro：可能无法使用最新版本的Sass * Pro：比本机Ruby稍微容易设置一些 * Con：每个服务器或工作站都需要设置Ruby * Con：对于.NET开发人员来说更难解决Ruby/集成问题

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

* Pro：（使用IronRuby）SLOW服务器编译（前端开发人员会抱怨！） * Pro：（使用IronRuby）可能无法使用最新版本的Sass * Pro：（使用IronRuby）比本机Ruby稍微容易设置一些 * Con：每个服务器或工作站都需要设置Ruby * Con：对于.NET开发人员来说更难解决Ruby/集成问题

- Sass或LESS：像[Mindscape Workbench][4]这样的Visual Studio插件

* Pro：易于入门 * Pro：快速编译 * Con：每个使用Sass样式的开发人员都需要一个IDE插件 * Con：无法在服务器上快速更改样式 - 需要本地重新处理

- LESS：类似[DotLessCSS][6]的.NET端口

* Pro：快速服务器编译 * Pro：非常容易设置 * Pro：适合C# .NET开发人员 * Pro：没有IDE /工作站/服务器要求 - 将其包含在Web应用程序本身中 * Con：没有SASS/Compass的多功能性，并且不能始终保证最新的LESS.JS语法兼容性

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

* Pro：不像你想象的那样可怕 * Pro：快速！ * Pro：最新的前端工具（Sass，Compass等），通过Linux软件包管理器更新 * Con：初始设置可能对非Linux用户而言很困难 * Con：环境要求现在涉及托管VM * Con：VM

- Phil Ricketts

在Bundle Transformer 1.9.81中，由于转换到libSass，BundleTransformer.SassAndScss模块的性能显著提高。 - Andrey Taritsyn

安德烈，我还记得你几年前尝试使用BundleTransformer的名字！我已经添加了一个注释，因为这对一些开发人员来说是更可取的。 - Phil Ricketts

13

我刚刚撰写了一篇Visual Studio插件的文章，其中包括详细的指令和屏幕截图，以介绍如何在Visual Studio中使用Sass。请查看这里 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

- Girish

11

这不是SASS，但你可以看一下我们的.NET端口Less Css。虽然Compass看起来非常有趣，但我认为为Less创建类似的工具将是一个很棒的补充。

- Owen

5

我昨天刚发现了这个项目，它看起来非常有前途。除了处理sass/scss之外，它还能自动压缩JS文件（目前不支持CSS），并且合并文件。我希望有人能够创建一个VS插件来编辑sass/scss文件。我发现一个问题是，当您的sass/scss代码出现错误时，只有通过测试或检查生成的CSS文件才能找到错误。我还没有完全测试过它，但目前为止一切都很好。

链接：https://github.com/xpaulbettsx/SassAndCoffee

- Dan Doyon

4

I originally answered this question 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

- yfeldblum

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Etienne · Accepted Answer

为了在Visual Studio中获得更好的工作体验，您可以安装最新版本的Web Essential，该版本开始支持Sass（SCSS语法）。
或者您可以安装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编译器的封装版本。

时髦工作室：又一款适用于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包安装最新版本。