在 ASP.NET 中使用 SASS

小开

The compass project has a compiler that will compile your sass to css. It's built to run on windows, but it is not well tested on that platform. If you find any platform related bugs, I'll gladly help you fix them.

Compass can be found here: http://github.com/chriseppsein/compass

小开

Its not SASS but you could take a look at our Less Css for .NET port. Compass looks really interesting though, and I think something like this for Less would be a great addition.

小开

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

小开

I just wrote a Visual Studio Add-in with detailed instructions including screenshots on how to get Sass going for Visual Studio. Check it out here - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

小开

I just found this yesterday, it looks quite promising, aside from sass/scss it will handle autominification of JS (not CSS - yet) and combining of files. One thing that I'm hoping is for someone out there to create a VS plugin for editing of sass/scss files. What I did find problematic was that when you have an error in your sass/scss code you only find it doing testing or inspecting of the generated CSS files. I haven't put it through all its paces, but so far so good.

https://github.com/xpaulbettsx/SassAndCoffee

小开

For a better working experience in Visual Studio, you could install the last version of Web Essential which is starting to support Sass (SCSS syntax).
Alternatively you could install Sassy Studio or Web Workbench.

Then to compile your .sass/.scss files in your ASP.NET project, there is some different tools: via Web Essential, Web Workbench, SassC, Sass.Net, Compass, SassAndCoffee...

Web Essential a fully featured plugin for Visual Studio, which really give a better experience for all Front-End stuffs. The latest version is starting to support Sass (SCSS syntax). Internally it use the Libsass to compile the SCSS to CSS.

Web Workbench is another plugin for Visual Studio that add syntax highlighting, intellisence and some other useful stuff for editing SCSS files. It can also compile your code into normal or minified CSS. Internally it used a wrapped version of the Ruby Sass compiler.

Sassy Studio: another plugin for Visual Studio. Less featured but much lighter.

The Libsass library is C++ port of the Sass CSS precompiler (still in development). The original version was written in Ruby, but this version is meant for efficiency and portability. This library strives to be light, simple, and easy to build and integrate with a variety of platforms and languages.

There are several wrappers around the Libsass library:

SassC: a command line compiler (on Windows you need to compile the source of SassC with MsysGit to get the sassc.exe).
NSass: a .Net wrapper.
Node-Sass: to use Libsass on Node.js.
etc.

Compass is a framework for Sass that add a lot of useful helpers (like image spriting) and can also compile your SCSS/Sass. But you need to install Ruby on each development environment where you need to compile your styles.

SassAndCoffee is a package that adds SCSS/Sass compilation and minification support, via some DLLs and configs. Its advantage over the Web Workbench compiler is it's self-contained into your Visual Studio solution: you don't need to install a plugin on every development environment. Remark: SassAndCoffee is not often updated, and because it use IronRuby to wrap the official Ruby compiler, you can get some performance issues. You can install the latest version via a Nuget package.

小开

In 2015, my current advice is to use Node.js (Server-side Javascript platform) and gulp.js (a task runner node package), along with gulp-sass (a node package for gulp implementing libsass - a fast C port of Ruby SASS).

You can get started with a tutorial like this.

Prefer Bundling? Bundle Transformer now finally uses libsass, enabling high-speed compilation.

Here's why I think you should use Node and Gulp.

Node is popular now for Frontend Tooling
Many web developers are now using Node a platform for frontend web development tasks. Whether it's Grunt, Gulp, JSPM, Webpack, or something else - it's happening right now in npm.
Things you can do with npm packages:
- Compile styles with Sass, Less, PostCSS and many more
- Concatenate Javascript, CSS, HTML templates and more
- Write other versions of JS and transpile ES6-7, Typescript, Coffeescript to ES5
- Create iconfonts from local SVG files
- Minify js, css, SVG
- Optimise images
- Save the whales
- ...
Simpler setup for new developers to a project
Once you've set up your project package.json and gulpfile.js, all it usually takes to get running is a few steps:
- Download and install Node.js
- Run npm install -g gulp (installs gulp globally)
- Run npm install (installs project packages locally)
- Run gulp taskname (Depending on how you've set up your gulpfile.js taskname will run a task that compiles your SASS, Javascript etc)
Supported by Visual Studio 2015
Believe it or not, VS2015 can now handle all the commandline stuff for you!

You have a couple of typical options in terms of workflow:

Have your developers commit their compiled code to the repository
Downside: Developers must always run gulp or similar to compile production-ready assets
Your build|stage|production servers run gulp tasks before releases
This way can be more complicated to set up, but means that work is validated and built fresh from uncompiled source.

Below is my old answer from 2012, kept for posterity:

From a Project-leading frontend developer working with Ruby, Python, and C# .NET, I have these thoughts:

Sass & LESS

I prefer to use [Sass][1] on a new project, especially with the wonderful [Compass framework][2]. Compass is a great piece of work, and adds much value to my process. Sass has a great community, OK documentation, and a powerful feature set. Sass is a Ruby library.

An alternative to Sass, is [LESS][3]. It has similar syntax and features, but a smaller community and slightly better documentation. LESS a JS library.

Trend-wise, people tend to move towards Sass over time as it is well-developed, even supporting CSS Level 4 features. But LESS is still perfectly usable, and easily adds enough value to warrant using it.

On using Sass/LESS in an ASP.NET Project

While I prefer using Sass, getting Ruby/Sass to work with .NET projects can be painful, because it's hard to setup, foreign, and can frustrate developers.

You have a few options:

Sass: Native Ruby + Sass

Pro: Fastest server compilation

Pro: Able to use latest versions of Sass

Con: Massive hassle to get up and running

Con: Every server or workstation needs ruby setting up

Con: Harder for .NET devs to solve Ruby/integration problems

Sass: Ruby .NET port like [IronRuby][5] + Sass

Pro: SLOW server compilation (Frontend Devs will complain!)

Pro: May not be able to use latest versions of Sass

Pro: Slightly easier to setup than Native Ruby

Con: Every server or workstation needs ruby setting up

Con: Harder for .NET devs to solve Ruby/integration problems

Sass: Extend [.NET Bundling][8] with [BundleTransformer][7] + Sass

Pro: (Uses IronRuby) SLOW server compilation (Frontend Devs will complain!)

Pro: (Uses IronRuby) May not be able to use latest versions of Sass

Pro: (Uses IronRuby) Slightly easier to setup than Native Ruby

Con: Every server or workstation needs ruby setting up

Con: Harder for .NET devs to solve Ruby/integration problems

Sass or LESS: Visual Studio plugin like [Mindscape Workbench][4]

Pro: Easy to get started

Pro: Fast compiling

Con: Every developer working with Sass styles needs an IDE plugin

Con: Can't quickly change styles on the server - requires local re-processing

LESS: .NET port like [DotLessCSS][6]

Pro: Fast server compilation

Pro: Very easy to setup

Pro: Comfortable to C# .NET devs

Pro: No IDE/workstation/server requirements - include it in the web app itself

Con: Hasn't got the versatility of SASS/Compass, and can't always guarantee latest LESS.JS syntax compatibility

Sass: Virtualise linux+Ruby with [Vagrant][9]

Pro: Not as horrible to setup as you might think

Pro: Fast!!

Pro: Latest Frontend tools (Sass, Compass etc), updated with linux package manager

Con: Initial Setup may be difficult for non-linux users

Con: Environment requirements now involve hosting a VM

Con: VM may have scalability/maintenance issues

In my opinion, LESS using [DotLessCSS][6] is the best choice for your typical web development project, for reasons stated above.

A couple of years ago, I found [DotLessCSS][6] to have annoying bugs and limitations, but using [DotLessCSS][6] again in 2012 on a few projects, I'm very happy with the setup. I haven't introduced pain to my developers by using Sass/Ruby and get most of the value out of LESS. Best of all, no IDE or workstation requirements.

[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/