Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>For a better working experience in Visual Studio, you could install the last version of <a href="http://vswebessentials.com/" rel="noreferrer">Web Essential</a> which is starting to support Sass (SCSS syntax). <br />Alternatively you could install <a href="http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d" rel="noreferrer">Sassy Studio</a> or <a href="http://www.mindscapehq.com/products/web-workbench" rel="noreferrer">Web Workbench</a>.</p> <p>Then to compile your .sass/.scss files in your ASP.NET project, there is some different tools: via <a href="http://vswebessentials.com/" rel="noreferrer">Web Essential</a>, <a href="http://www.mindscapehq.com/products/web-workbench" rel="noreferrer">Web Workbench</a>, <a href="https://github.com/hcatlin/sassc" rel="noreferrer">SassC</a>, <a href="http://libsassnet.codeplex.com/" rel="noreferrer">Sass.Net</a>, <a href="http://compass-style.org/" rel="noreferrer">Compass</a>, <a href="https://github.com/xpaulbettsx/SassAndCoffee" rel="noreferrer">SassAndCoffee</a>...</p> <hr> <p><a href="http://vswebessentials.com/" rel="noreferrer"><strong>Web Essential</strong></a> 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.</p> <hr> <p><a href="http://www.mindscapehq.com/products/web-workbench" rel="noreferrer"><strong>Web Workbench</strong></a> 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.</p> <hr> <p><a href="http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d" rel="noreferrer"><strong>Sassy Studio</strong></a>: another plugin for Visual Studio. Less featured but much lighter.</p> <hr> <p>The <a href="https://github.com/hcatlin/libsass" rel="noreferrer"><strong>Libsass library</strong></a> 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.</p> <p>There are several wrappers around the Libsass library:</p> <ul> <li><a href="https://github.com/hcatlin/sassc" rel="noreferrer"><strong>SassC</strong></a>: a command line compiler (on Windows you need to compile the source of SassC with MsysGit to get the sassc.exe).</li> <li><a href="https://github.com/TBAPI-0KA/NSass" rel="noreferrer"><strong>NSass</strong></a>: a .Net wrapper.</li> <li><a href="https://github.com/andrew/node-sass" rel="noreferrer"><strong>Node-Sass</strong></a>: to use Libsass on Node.js.</li> <li>etc.</li> </ul> <hr> <p><a href="http://compass-style.org/" rel="noreferrer"><strong>Compass</strong></a> 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.</p> <hr> <p><a href="https://github.com/xpaulbettsx/SassAndCoffee" rel="noreferrer"><strong>SassAndCoffee</strong></a> 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 <a href="http://nuget.org/packages/SassAndCoffee" rel="noreferrer">Nuget package</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload