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]