Screencast: Compass & CSS Sprites

Compass ist eine Ergänzung zu SASS indem es viele Benutzte Elemente noch weiter vereinfacht. Es werden z.B. vorgefertigte Mixin-Ins, Funktionen und mehr zur Verfügung gestellt. In diesem Screencast zeigt Ryan wie es verwendet wird und zusätzlich wie Compass für CSS-Sprites genutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
group :assets do
gem ‚compass-rails‘
end
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "compass";
@import "compass/reset";
@import "layout";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
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));
}
[/css]

app/views/layouts/application.html.erb

[html]
<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>
[/html]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.