我正在研究如何在ASP.NET环境中使用SASS(Syntactically Awesome StyleSheets)的方法。理想情况下,我希望将SASS文件编译成CSS是构建过程的一个无缝部分。
有什么最好的集成方式?或者,是否有其他更适合.NET环境的CSS生成工具?
我正在研究如何在ASP.NET环境中使用SASS(Syntactically Awesome StyleSheets)的方法。理想情况下,我希望将SASS文件编译成CSS是构建过程的一个无缝部分。
有什么最好的集成方式?或者,是否有其他更适合.NET环境的CSS生成工具?
为了在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库的包装器:
Compass是一个基于Sass的框架,它添加了许多有用的辅助函数(如图像合并),也可以编译您的SCSS/Sass。但是,在需要编译样式的每个开发环境中都需要安装Ruby。
SassAndCoffee 是一个包,通过一些DLL和配置文件添加了SCSS/Sass编译和压缩支持。它相比于Web Workbench编译器的优点是它是自包含的在你的Visual Studio解决方案中:你不需要在每个开发环境中安装插件。注意:SassAndCoffee并不经常更新,并且因为它使用IronRuby来包装官方的Ruby编译器,你可能会遇到性能问题。你可以通过Nuget包安装最新版本。
Compass项目有一个编译器,可以将你的sass编译成css。该编译器是为Windows系统构建的,但在该平台上并未进行充分测试。如果您发现任何与平台相关的错误,我很乐意帮助您解决。
您可以在这里找到Compass:http://github.com/chriseppsein/compass
以下是我认为您应该使用Node和Gulp的原因。喜欢捆绑? Bundle Transformer现在最终使用libsass,实现高速编译。
package.json
和gulpfile.js
项目,通常只需要几步即可运行:npm install -g gulp
(全局安装gulp)npm install
(本地安装项目包)gulp taskname
(根据您如何设置gulpfile.js
,taskname将运行编译您的SASS,JavaScript等的任务)让开发人员将编译后的代码提交到存储库
缺点:开发人员必须始终运行gulp
或类似工具来编译生产就绪的资源。
在发布前,您的构建|阶段|生产服务器运行 gulp 任务
这种方式可能更复杂,但意味着工作是从未编译的源代码中验证和构建的。
以下是我2012年的旧答案,仅供参考:
一个领导项目的前端开发人员,使用Ruby,Python和C# .NET,有以下想法:我刚刚撰写了一篇Visual Studio插件的文章,其中包括详细的指令和屏幕截图,以介绍如何在Visual Studio中使用Sass。请查看这里 - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/
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