Using Compass on Windows with Visual Studio C# and ASP.NET

Question

Has anyone done any development of Compass for CSS/SASS in a standard C# ASP.NET environment?

Is there a single distribution I can just download that's ready to go for Windows or do I need install every piece of the equation and build compass myself?

Are there any plugins that make developing with Compass friendlier with VS2008 such as automagical handling of Compass/SASS in builds, syntax highlighting, and/or intellisense support?

If there aren't any VS IDE plugins what are the best options for a standalone text editor for handling coding in Compass?

Answer 1

Getting started with Compass,

First yes I have to install Ruby and the compass source and compile up my version of compass I followed the instructions on Compass's Wiki Getting Started.

After getting Compass and all it's dependencies installed and built I created my first project.

compass -f blueprint project-name

Which creates a default project with compass for the blueprint css framework, currently there's a bug in compass with the creation of the grid.png file in the images directory for compass so you need to copy the original grid.png from the source folder

C:\Ruby\lib\ruby\gems\1.8\gems\chriseppstein-compass-0.8.10
    \frameworks\blueprint\templates\project

Or similarly located file depending on where you installed everything. One of the most important changes IMO for working with compass on asp.net is to change the SASS CACHE directive of compass. The SASS CACHE creates a bunch of temporary folders in your project directory which probably would have poor outcomes if they ended under source control. So open up config.rb and add this line

sass_options = {:cache_location => 
    "#{Compass.configuration.project_path}\\tmp\\sass-cache"} 

Make sure to note the escaped backslashs.

After this I modified the names of the folders that compass uses for how I wanted them named inside the config.rb and started getting to it with SASS and Compass. I recommend watching the hour long introduction to compass video it's very helpful and I learned alot from it: Watch the screen cast.

One of the things which this showed me was how to set compass to watch for file system changes and automagic compile the sass to css. By using

compass -w

This is working real well for me, just make sure you keep your css files checked out or turn them off read only if they're under source control if your project doesn't support concurrent checkouts.

For editing I'm using SciTE that's included with Ruby by default for the config.rb files or just the editor window in VS2008. For Sass I came across a big list on the HAML website. jEdit with highlighting syntax file for SASS was what I ended up using after trying a few. I'd still like to find a VS plugin for syntax highlighting so I don't need to use another editor but jEdit is definitely getting the job done.

Answer 2

To complete the last answers, you can install Web Workbench, a plugin for Visual Studio 2010 wich add syntax highlighting, intellisence and some other stuff for the SASS language (SCSS syntax only).

If you prefer using Compass and/or some other tools to compile your CSS, you should disable the built-in compiler. I listed some other SASS compilers here: Using SASS with ASP.NET.

To disable the built-in compiler: select the .scss file in Solution Explorer, go to the Properties window and delete the text from the Custom Tool box.

Since Web Workbench 3 you can now manage more easily what you want to compile with this plugin. See the Mindscape > Web Workbench Settings menu item.

Answer 3

I wanted to add another alternative here. If you just want to ensure that compass builds the sass files and includes the css files when you build your ASP.net project you can add the following to your project(csproj) file under the project section:

<Target Name="AfterBuild" Condition="'$(Configuration)' == 'Release' ">
   <Exec Command="compass compile --output-style compressed --force" />
   <ItemGroup>
      <Content Include="Styles\*.css" />
   </ItemGroup>
</Target>
<Target Name="AfterCompile" Condition=" '$(Configuration)' == 'Debug' ">
    <Exec Command="compass compile" />
    <ItemGroup>
      <Content Include="Styles\*.css" />
   </ItemGroup>
</Target>

The first Target is for Release and will also compress the css, the other one is for Debug.

If you want to customize paths add a config.rb to the project root folder:

css_dir = "Content"
sass_dir = "Content/Sass"

This all of course requires compass and ruby to be installed and to be in the path of your machine.

Answer 4

My answer is a bit antiquated. Before following my original answer, I would recommend exploring the Nuget package SassAndCoffee. The full details can be found here.

How does it work?

SassAndCoffee embeds the original compilers in the DLL as (Sass 3.2.0 and CoffeeScript 1.1.0 as of this writing) and uses IronRuby and Jurassic respectively to execute the compilers against your source.

Why is this better than [SOMEOTHERPROJECT]?

No external processes are executed
You don’t have to install Ruby or node.js
It’s in NuGet so you don’t have to fiddle with web.config
Files are cached and are rebuilt as-needed.