Screencast: Besseres Sass mit Bourbon

Downloads in verschiedenen Formaten:

mp4 m4v webm ogg

Resourcen:

• Bourbon
• Sass Functions

Gemfile

[ruby] gem ‘bourbon’ [/ruby]

app/assets/stylesheets/application.css.scss

[css] @import “bourbon”; @import “layout”; @import “projects”; [/css]

app/assets/stylesheets/layout.css.scss

[css] body { margin: 0; padding: 0; background-color: #FFF; font-size: 14px; font-family: $verdana; }

#header { color: #FFF; padding: 15px 100px; font-size: 30px; font-weight: bold; @include linear-gradient(#777, #444); @include box-shadow(0 0 6px 3px #000); }

#container { margin: 0 100px; }

a { color: #2D6DD2; } [/css]

app/assets/stylesheets/projects.css.scss

[css] .project { border: solid 1px #AAA; margin: 20px 0; padding: 7px 12px; @include border-radius(6px); @include transition(all, 500ms, ease-in-out); &:hover { background-color: #F8FCCF; } h2 { margin: 0; a { text-decoration: none; } } }

.new_project { @include button(simple, #3FB344); text-decoration: none; font-size: 16px; } [/css]