Screencast: Sass Basiswissen

Sass ist neben CoffeeScript eine der Neuerungen die mit Rails 3.1 kommen werden. Sass ermöglicht die Entwicklung von Cascading Stylesheets (CSS) mit der Eweiterung, dass Ruby-Code in die Stylesheets eingebettet werden können. Somit lassen sich Variablen und Funktionen für die vereinfachte Erstellung nutzen. Weiterhin werden auch Tools zum Komprimieren mitgeliefert, um die generierten Dateien möglichst klein zu halten.

 

Downloads in verschiedenen Formaten:

source code
mp4
m4v
webm
ogv

 

Resourcen:

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

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.