For this blog post we will be covering basic image spriting using Compass along with Web Workbench from within Visual Studio. Using Sprites for multiple images in your websites reduces the amount of browser requests as well as reducing the total file size, creating faster loading web pages.
Programs used:
We will kick off by creating a new ASP.NET Website. We can then right click on the web site node in the Solution Explorer and select ‘Setup Compass Project’.
Once Compass is enabled you will see that two new folders have been created. One is called stylesheets which is where our scss is compiled, and the other is called [sass] where we will find our scss files.
For this example we will need to create three more things, an images folder with a sub-folder where we will place our sprites. It’s best to have all your sprites in one folder to make it easier to manage. For simplicities sake we also have a single HTML file that we’ll store — amazingly — our HTML in!
We need to include our outputted css, so include the screen.css file in the head of your HTML file. As well as the css, we need a button to style! I just used a simple link tag.
To sprite images together first you need images! I created 3 button states:
I’ve included the images in the btn sub-folder we made under images.
Once you have done this, right click on the btn folder and select ‘Generate Spriting Import’.
After generating the spriting import you’ll find that there is a new sprites folder in our sass folder. Inside will be our generated scss. We then include that file in our screen.scss file so the mixin’s defined in that file get included when we save our screen file.
Create your awesome button with scss, for the background images use the generated mixins created by compass, along with the image name.
We still need to change some defaults to make our button sprites work. Inside your config.rb file we have to uncomment “relative_assets”. We want our sprites to repeat horizontally we will need to change the default “no_repeat” to “repeat-x” on line 59 of our generated _btn.scss file. This is primarily for this tutorial, but it’s the easiest way to demonstrate this technique.
And that’s it! Our 3 small images are now sprited:
Feel free to Download the Source Files and have a look for yourself. :)
Don’t forget to grab the Web Workbench for Visual Studio here.
You should join our newsletter! Sent monthly:
[...] Compass can automatically handle image spriting for you. [...]
[...] New gallery update – Compass support! [...]
Does this work with the free version of Web Workbench?
I don’t see “Setup Compass Project” in the right-click menu on my ASP.NET MVC4 project in Visual Studio 2012.
Hi Daniel.
Yes the free version of Web Workbench does support Compass Projects. Make sure you have the latest build of Web Workbench, which can be downloaded from the Visual Studio Gallery.
Great news!!
I have already Setup a Compass Project… but I have one question: can I change the config values in the config.rb file to actually change the css_dir and sass_dir and still use the Compass compiler?… I use App_Themes so my folders need to be set to that path.
If I understand right the workbench has now two compilers and which one is used depends on the Project being set as “Compass Project”, right? If it is, then I can already use any compass mixin in my scss files located in the ‘sass_dir’ setting, is that correct?
I’m sure this new feature will have more people wanting to download the Tool. Congratulations to all the team!
Note the images directory must be spelled with a lowercase ‘i’. Otherwise, the “Generate Sprinting Import” menu item is not available. Initially confusing as the ASP.NET MVC templates generate an images directory spelled with a capital ‘I’.
This seem like a bug to me?
Hi Mindscape,
Great job for integrate compass in workbench
In command line is that possible to use compass?!
Do you have any example for spriting with compass and command line?
Thanks,
Thomas
Not currently, but we will be looking at adding in support for this soon :) Thanks for the feedback!
No currently this is required but we will be looking at making another update soon to allow flexibility around this and allowing the config.rb values to be managed by Web Workbench. Thanks for the feedback! :)
Not currently but I will have a look at adding this – thanks for the feedback! :)
I already created a lowercase images folder on the root of my VS 2010 MVC 4 project, but I’m still not getting the “Generate Spriting Import” context menu. Anyone else experiencing the same problem? Thanks!
Actually I think I figured it out, you have to have the images folder in the root of your project, then add a child folder with images inside it, then the “Generate Spriting Import” context menu should appear when you right click on the child folder (that has images inside).
It would be really nice if we can configure this setting to a custom images folder/location elsewhere in the project.
Thanks guys!
I’m using a licensed version of Workbench and Visual Studio 2012. When I try to generate sprites I get “Object reference not set to an instance of an object”. The config.rb looks correct and it compiles my scss files. What could be wrong here?
Hi Lusse,
Can you post what is displayed in the Web Workbench output window? It should be displaying the result from Compass. Are there any errors? Also do you have a sprites folder located underneath your Sass path? Does it contain any .scss files?
Jeremy
Leave a Reply