Working with Compass + Web Workbench to create button sprites within Visual Studio

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:

Step 1: Setting up Compass

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’.

Setting up Compass within Visual Studio

Step 2: File Structure

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!

Add html file and images, as well as subfolders

Step 3: HTML

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.

HTML markup

Step 4: Generate Spriting Import

To sprite images together first you need images! I created 3 button states:

  • normal
  • hover
  • active

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’.

Generate sprites with compass

Step 5: Including the Generated Scss

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.

Importing generated scss

Step 6: Using Generated Mixins

Create your awesome button with scss, for the background images use the generated mixins created by compass, along with the image name.

scss markup

Step 7: Changing Compass Defaults

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.

Make some changes to the compass defaults

Finished Result!

And that’s it! Our 3 small images are now sprited:

Finished product

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.

16 Responses to “Working with Compass + Web Workbench to create button sprites within Visual Studio”

  • […] 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

  • Is it possible to have 2 config.rb files for one webapp project? As I found compass works correctly for me only if config.rb is in root of the project that was setup as compass project.

  • Hi Milan,

    No you can only have a single config.rb (One Compass app per project) which needs to be located in the root of the project. If you need to have multiple apps you will need to split this into multiple projects (e.g. 1 web app + 1 web site for the sub-area which needs to be handled a seperate Compass app).

    Jeremy

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top