Try Tuts+ Premium, Get Cash Back!
SASS and Compass for Web Designers: Grids and Sprites
videos

SASS and Compass for Web Designers: Grids and Sprites

on Mar 15th 2012 with 16 comments
Tutorial Details
  • Topic: SASS and Compass, CSS
  • Difficulty: Beginner
  • Screencast duration: 22 mins

Final Product What You'll Be Creating

Download Source Files
This entry is part 3 of 6 in the series SASS and Compass for Web Designers

SASS and Compass for Web Designers

Let’s dive deeper into building the popular Themeforest .psd design we’ve been working on. During this screencast we’ll be looking at grids in SASS, and we’ll also use one of my favorite features in Compass; automatic sprite generation.

Grids and Sprites

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Useful resources

Series Navigation<< SASS and Compass for Web Designers: Building a ThemeSASS and Compass for Web Designers: The Header >>

Norris is PureMellow on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

My name is Norris, and I am a hybrid Designer/Developer. I work mostly with Wordpress, but in my spare time I like expanding my knowledge in various other programming languages, and working on my own projects. You can find me on twitter as @justnorris and my personal website is justnorris.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://richardmisencik.com Richard

    Great! I would like to ask one thing, what color scheme are you using for sublime text? It looks really nice!

    • http://www.themer.me Methemer
      Author

      Thanks!
      It’s “Tomorrow – Night”.

      • http://richardmisencik.com Richard

        Nice, thanks :)

  • Pingback: SASS and Compass for Web Designers: Grids and Sprites | Shadowtek | Hosting and Design Solutions

  • http://www.forixwebdesign.com Tessa

    For past few days i am searching for SASS resource and found it right here. Its great collection.

  • Pingback: Sass - Techniques | Pearltrees

  • http://agama.com.co ZoiX

    Simply amazing! Thank you for this great tutorial, I’ll be waiting for the next video :)

  • Pingback: 35 Great Resources for Compass and Sass | Fuel Your Coding

  • Pingback: In praise of HTML5 and why it is so important for new websites - Best Website Builder HQ - Best Website Builder HQ

  • Alex

    Wow, that sprite feature is amazing. Thanks for this awesome tut.

    Question: what would you say are some of the differences between your Blankwork -vs- the 960gs (for sass)?

    Thanks again!

    • http://www.themer.me Methemer
      Author

      There is a small and simple difference – In Blankwork you can make subtractions from columns. I will cover that in the next video :).

      • alex

        I can’t believe I never looked into Compass sooner. Your tutorials got me looking into ‘fancy-buttons’ a Compass plugin. I was wondering, do you have any experience working with other Compass plugins that you would recommend as useful?

        I’m looking forward to your next video. Thanks and keep up the great work!

  • Hulk

    I tried your blankwork and it looks like the ‘omega’ functionality is busted. It’s not pushing the last column to the far right edge of the container. Could you check?

    container {
    @inlcude container();

    pitch {
    $_columns / 3 // Assume 3 boxes like your tut html
    }

    &.first {
    @include alpha; // Works!
    }
    &.last {
    @include omega; // Compliles, but doesn’t work?
    }
    }

  • Justin

    Just wondering if the next (or final) parts of this tutorial are going to be made available?

    • http://www.snaptin.com Ian Yates

      Apologies for the delay on this Justin – Norris has a lot on his plate at the moment recording a screencast course for Premium! We’ll be back with more SASS very soon :)

  • Eugene

    Simply great. I just started to learn SASS and this tutorial was very helpful. Thanks!

  • http://martealdesigns.com bob marteal

    This is great. Has anyone worked out making Blankwork either % or em based for flexibility?

  • verpixelt

    Hey man awesome tut but there is one point in the sprite part I dont understand. My folder structure and my files are identical to yours, but when I add the data for my sprite to my screen.scss it dont get displayed. .spr-sprite, header h1 gets url(‘/images/spr-s00739dd62e.png’) no-repeat if I add two dots with the inspector to the path url(‘../images/spr-s00739dd62e.png’) then it works. Why isn’t this happening for you and how can i fix it?

    • http://www.themer.me Norris
      Author

      You’re viewing your file as an HTML File. If you’d develop using a webserver of some sort (as I am), everything would be exactly the same. In your case what you need is to turn on Relative Assets.
      I’m covering this in one of these tutorials in this series (can’t remember which one exactly at this point), and if you’re a Premium subscriber, you’ll get your answer here: https://tutsplus.com/lesson/compass-image-handling/

  • Pingback: KickSass | Ministry of Code