Sentia software development

4Aug

Sassing a .Net application - part I

I've long been wanting to remove the duplication Im forced into with CSS, and so I decided to get Sass going in my ASP.NET MVC application.
A side benefit of getting sass into my application was getting Rake running to assist. I can now choose between rake or nant for any of my build activities.

So the first step was getting a 'Hello Rake World' task running on my Windows dev machine, just to get all the working parts in place. I installed ruby, and then created a RakeFile.rb in the trunk of my application. The following is my uber complex :hello_world task.

    
    
        desc "Hello World"
        task :hello_world do
	    puts "Hello Rake World!"
        end
    

Running this at the command line gave me the following output:

The next step was to be able to call Rake tasks from Nant. Im not sure if this is a particulary elegant way to go, but Nant is contolling my build so it made sense for now.

The following Nant target calls the :hello_world rake task:

All im doing here is calling the rake.bat batch file. I am passing it the rakefile that sits in my applications trunk, specifying the hello_world target and setting the working directory to be the ruby bin directory (specified in a Nant property).

Calling that nant target at the command line yielded the following output:

So far so good, I have a nant target that can run in my build process that can call a rake task, time to start doing something useful.

I then installed the haml gem and copied the haml-2.0.2 directory over to my tools folder in my application. I don't mind having a dependency on Rails being installed on a development machine, but dependencies on gems isn't suitable.

I require the sass in my rakefile with the following. Its not necessary to require haml since we only make use of the Sass rendering engine.

    
        require File.join(File.dirname(__FILE__), 'tools/haml-2.0.2/lib', 'sass')
    

Now with the help of this post I was able to put together a task that converted any .sass file in my css/sass directory to the associated .css file.

    
    
        desc "Regenerates all sass templates."
        task :sass2css do
	    stylesheets_root = File.join(File.dirname(__FILE__), 'src/app/mvc/content/css')
	
	    Dir[stylesheets_root + "/sass/*.sass"].each do |source|
		target = File.join(stylesheets_root, File.basename(source, ".sass") + ".css")
		puts "Sassing #{source} to #{target}"
		puts ""
		File.open(target, "w") { |f| f.write(Sass::Engine.new(IO.read(source)).render)}
	    end
        end
    

All that remained to do was call this task from within my nant file, and I have my css being generated as part of my build. I also called this from my VS build, so when I change my sass files and recompile, the rake task is called and the css files are regenerated.

Now I've actually gone 2 steps forward and 1 step back here. Previously css changes were visible in my site by simply saving the stylesheet and refreshing, but now I have to recompile, which means my feedback cycle for css changes has gone from roughly 1 second to about 15 seconds, and this is unsatisfactory.... But ill address that in part II.