1. Erste Schritte
Features
Fazit und Links
Syntactically Awesome Stylesheets mit
Sass
Martin Grandrath
InsertEFFECT GmbH
Webmontag Erlangen, 11. Oktober 2010
Grandrath Sass
2. Erste Schritte
Installation
Features
Ein Stylesheet mit Sass
Fazit und Links
Installation
Ruby
Rubygems
gem install haml
Grandrath Sass
3. Erste Schritte
Installation
Features
Ein Stylesheet mit Sass
Fazit und Links
Jedes Stylesheet ist eine Sass-Datei
input.scss
#navbar {
width: 80%;
height: 23px;
}
$ sass input.scss:output.css
output.css
#navbar {
width: 80%;
height: 23px; }
Grandrath Sass
4. Erste Schritte
Installation
Features
Ein Stylesheet mit Sass
Fazit und Links
Jedes Stylesheet ist eine Sass-Datei
input.scss
#navbar {
width: 80%;
height: 23px;
}
$ sass input.scss:output.css
output.css
#navbar {
width: 80%;
height: 23px; }
Grandrath Sass
5. Erste Schritte
Installation
Features
Ein Stylesheet mit Sass
Fazit und Links
Jedes Stylesheet ist eine Sass-Datei
input.scss
#navbar {
width: 80%;
height: 23px;
}
$ sass input.scss:output.css
output.css
#navbar {
width: 80%;
height: 23px; }
Grandrath Sass
6. Erste Schritte
Installation
Features
Ein Stylesheet mit Sass
Fazit und Links
Nützliche Parameter
sass -watch input.scss:output.css Aktualisiert
output.css automatisch wenn sich input.scss
ändert
sass -style compressed input.scss:output.css
Erstellt eine minimierte Version ohne Whitespace
und Kommentare
Grandrath Sass
7. Erste Schritte
Features
Fazit und Links
Kommentare
input.scss output.css
/* A CSS comment */ /* A CSS comment */
body { color: black; } body {
color: black; }
// A Sass comment
a { color: green; } a {
color: green; }
Grandrath Sass
8. Erste Schritte
Features
Fazit und Links
Kommentare
input.scss output.css
/* A CSS comment */ /* A CSS comment */
body { color: black; } body {
color: black; }
// A Sass comment
a { color: green; } a {
color: green; }
Grandrath Sass
9. Erste Schritte
Features
Fazit und Links
Variablen
input.scss output.css
$link-color: #ce4dd6; a {
color: #ce4dd6; }
a {
color: $link-color;
}
Grandrath Sass
10. Erste Schritte
Features
Fazit und Links
Variablen
input.scss output.css
$link-color: #ce4dd6; a {
color: #ce4dd6; }
a {
color: $link-color;
}
Grandrath Sass
11. Erste Schritte
Features
Fazit und Links
Nesting
input.scss output.css
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; }
list-style-type: none; #navbar li {
} float: left; }
li { #navbar li a {
float: left; font-weight: bold; }
a { font-weight: bold; }
}
}
Grandrath Sass
12. Erste Schritte
Features
Fazit und Links
Nesting
input.scss output.css
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; }
list-style-type: none; #navbar li {
} float: left; }
li { #navbar li a {
float: left; font-weight: bold; }
a { font-weight: bold; }
}
}
Grandrath Sass
13. Erste Schritte
Features
Fazit und Links
Arithmetik
input.scss output.css
#navbar { #navbar {
$width: 800px; width: 800px; }
$items: 5; #navbar li {
float: left;
width: $width; width: 160px; }
li {
float: left;
width: $width/$items;
}
}
Grandrath Sass
14. Erste Schritte
Features
Fazit und Links
Arithmetik
input.scss output.css
#navbar { #navbar {
$width: 800px; width: 800px; }
$items: 5; #navbar li {
float: left;
width: $width; width: 160px; }
li {
float: left;
width: $width/$items;
}
}
Grandrath Sass
15. Erste Schritte
Features
Fazit und Links
Arithmetik mit Farben
input.scss output.css
p { p {
color: #010203 + #040506; color: #050709; }
}
a {
$links: #4e2e9e; color: #4e2e9e; }
a { a:hover {
color: $links; } color: #9175d7; }
a:hover {
color: lighten($links, 25%);
}
Grandrath Sass
16. Erste Schritte
Features
Fazit und Links
Arithmetik mit Farben
input.scss output.css
p { p {
color: #010203 + #040506; color: #050709; }
}
a {
$links: #4e2e9e; color: #4e2e9e; }
a { a:hover {
color: $links; } color: #9175d7; }
a:hover {
color: lighten($links, 25%);
}
Grandrath Sass
17. Erste Schritte
Features
Fazit und Links
Referenz auf Elternelement
input.scss output.css
#main { #main {
color: black; color: black; }
a { #main a {
font-weight: bold; font-weight: bold; }
&:hover { color: red; } #main a:hover {
} color: red; }
}
Grandrath Sass
18. Erste Schritte
Features
Fazit und Links
Referenz auf Elternelement
input.scss output.css
#main { #main {
color: black; color: black; }
a { #main a {
font-weight: bold; font-weight: bold; }
&:hover { color: red; } #main a:hover {
} color: red; }
}
Grandrath Sass
27. Erste Schritte
Features
Fazit und Links
Pro und Kontra
Pro
Vieles, was man bisher bei CSS vermisst hat (z. B.
Variablen)
Flache Lernkurve durch CSS-Syntax
Code wird besser wartbar (z. B. Nesting, Mixins)
Stylesheets können zur Entwicklung auf mehrere Dateien
verteilt und in der Produktion in einer einzelnen Datei
ausgeliefert werden (@import)
Kontra
Deployment-Prozess wird komplexer
Stylesheets können größer als erwartet werden
Grandrath Sass
28. Erste Schritte
Features
Fazit und Links
Links
Sass
http://sass-lang.com/
Haml
http://haml-lang.com/
Ruby
http://www.ruby-lang.org/
RubyGems
http://rubygems.org/
Ruby für Windows
http://rubyinstaller.org/
Grandrath Sass
29. Erste Schritte
Features
Fazit und Links
Fragen?
Fragen!
Grandrath Sass
