#334 Compass & CSS Sprites

Mar 21, 2012 | 9 minutes | Views, Plugins

Compass improves the Sass experience by providing useful mixins, functions, and more. You will also learn how to make CSS sprites with it in this episode.

Click to Play Video ▶

Download:
source codeProject Files in Zip (102 KB)
mp4Full Size H.264 Video (33.2 MB)
m4vSmaller H.264 Video (14.2 MB)
webmFull Size VP8 Video (14.2 MB)
ogvFull Size Theora Video (36.1 MB)

Browse Source Code

Resources

          Gemfile
        
group :assets do
  gem 'compass-rails'
end

          app/assets/stylesheets/application.css.scss
        
@import "compass";
@import "compass/reset";
@import "layout";

          app/assets/stylesheets/layout.css.scss
        
h1 {
  font-size: 28px;
  font-weight: bold;
  margin: 18px 0;
}

ul.horizontal {
  @include horizontal-list;
}

@import "icons/*.png";
@include all-icons-sprites;

#nav_bar {
  // ...
  @include background-image(linear-gradient(#5c5c5c, #111111));
}

          app/views/layouts/application.html.erb
        
<li><a class="icons-itunes" href="/itunes"></a></li>
<li><a class="icons-twitter" href="/twitter"></a></li>
<li><a class="icons-facebook" href="/facebook"></a></li>
<li><a class="icons-rss" href="/rss"></a></li>