Screencast: Sass Basiswissen

Downloads in verschiedenen Formaten:

source code mp4 m4v webm ogv

Resourcen:

• Sass
• Sass Functions
• Sass TextMate Bundle

[css] /* *= require_self */ @import “layout.css.scss”; @import “projects.css.scss”; [/css] [css] $main-color: #1E7B12;

@mixin rounded-corners($radius) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; }

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

#header { background-color: $main-color; color: #FFF; padding: 4px 100px; border-bottom: solid 5px darken($main-color, 10%);

h1 { font-size: 30px; } }

a { color: $main-color; text-decoration: none; &:hover { text-decoration: underline; } }

#container { margin: 0 100px; } [/css] [css] #projects_controller { .new_project { background-color: $main-color; color: #FFF; padding: 5px 12px; margin: 10px 0; font-size: 16px; @include rounded-corners(5px); }

.project { border: solid 1px #777; margin: 20px 0; padding: 7px 12px; @include rounded-corners(10px); }

.project h2 { margin: 0; } } [/css]