[ACCEPTED]-Using SASS with ASP.NET-sass

Accepted answer
Score: 42

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

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


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


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


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


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

There 17 are several wrappers around the Libsass 16 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 15 a lot of useful helpers (like image spriting) and 14 can also compile your SCSS/Sass. But you 13 need to install Ruby on each development 12 environment where you need to compile your 11 styles.


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

Score: 26

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

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

Score: 25

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

You can get started with a tutorial like this.

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

Here's why I think you should 38 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 37 options in terms of workflow:

  • Have your developers commit their compiled code to the repository
    Downside: Developers 36 must always run gulp or similar to compile production-ready 35 assets

  • Your build|stage|production servers run gulp tasks before releases
    This way can be more complicated 34 to set up, but means that work is validated 33 and built fresh from uncompiled source.

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

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

Sass & LESS

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

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

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

On using Sass/LESS in an ASP.NET Project

While 15 I prefer using Sass, getting Ruby/Sass to 14 work with .NET projects can be painful, because 13 it's hard to setup, foreign, and can frustrate 12 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 11 opinion, LESS using [DotLessCSS][6] is the 10 best choice for your typical web development 9 project, for reasons stated above.

A couple 8 of years ago, I found [DotLessCSS][6] to 7 have annoying bugs and limitations, but 6 using [DotLessCSS][6] again in 2012 on a 5 few projects, I'm very happy with the 4 setup. I haven't introduced pain to my 3 developers by using Sass/Ruby and get most 2 of the value out of LESS. Best of all, no 1 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/

Score: 13

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

Score: 11

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

Score: 5

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

https://github.com/xpaulbettsx/SassAndCoffee

Score: 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

0

More Related questions