1. k o m mu n ik at ion & sys teme
Sass & Compass
Eine kurze Vorstellung

2. ko mm u n i k ati o n & s ys te m e
Sass.
Syntactically Awesome Stylesheets
Einstieg SVN – ©2011 Michael van Engelshoven

3. ko mm u n i k ati o n & s ys te m e
• Ein „CSS Compiler“Sass.
• Erweitert CSS mit dem was uns fehlt
• Verbessert Wart- und Lesbarkeit
• Bietet zwei verschiedene Syntaxen
Einstieg SVN – ©2011 Michael van Engelshoven

4. ko mm u n i k ati o n & s ys te m e
Installation und Benutzung
$ gem update --system
$ gem install sass
$ mv style.css style.scss
$ sass --watch style.scss:style.css
Einstieg SVN – ©2011 Michael van Engelshoven

5. ko mm u n i k ati o n & s ys te m e
2 Syntaxen
Sassy CSS (.scss) Indented Syntax (.sass)
.content-navigation { .content-navigation
border-color: #3bbfce; border-color: #3bbfce
color: #2ca2af; color: #2ca2af
}
.border
.border { padding: 8px
padding: 8px; margin: 8px
margin: 8px; border-color: #3bbfce
border-color: #3bbfce;
}
Sass & Compass – ©2011 Michael van Engelshoven

6. ko mm u n i k ati o n & s ys te m e
Variablen
scss css
$blue: #3bbfce; .content-navigation {
$margin: 16px; border-color: #3bbfce;
}
.content-navigation {
border-color: $blue; .border {
} padding: 8px;
margin: 8px;
.border { border-color: #3bbfce;
padding: $margin / 2; }
margin: $margin / 2;
border-color: $blue;
}
Sass & Compass – ©2011 Michael van Engelshoven

7. ko mm u n i k ati o n & s ys te m e
Verschachtelungen
scss css
table.hl { table.hl {
margin: 2em 0; margin: 2em 0;
td.ln { }
text-align: right; table.hl td.ln {
} text-align: right;
} }
li { li {
font: { font-family: serif;
family: serif; font-weight: bold;
weight: bold; font-size: 1.2em;
size: 1.2em; }
}
}
Sass & Compass – ©2011 Michael van Engelshoven

8. ko mm u n i k ati o n & s ys te m e
Vererbung
scss css
.error { .error, .badError {
border: 1px #f00; border: 1px #f00;
background: #fdd; background: #fdd;
} }
.error.intrusion {
font-size: 1.3em; .error.intrusion,
font-weight: bold; .badError.intrusion {
} font-size: 1.3em;
font-weight: bold;
.badError { }
@extend .error;
border-width: 3px; .badError { border-width: 3px; }
}
Sass & Compass – ©2011 Michael van Engelshoven

9. ko mm u n i k ati o n & s ys te m e
Mixins & Funktionen
scss css
@mixin table-base { #data {
th { color: #2ca2af;
text-align: center; }
Font-weight: bold; #data th {
} text-align: center;
td, th {padding: 2px} font-weight: bold;
} }
#data td, #data th {
#data { padding: 2px;
color: darken(#3bbfce, 9%); }
@include table-base;
}
Sass & Compass – ©2011 Michael van Engelshoven

10. ko mm u n i k ati o n & s ys te m e
Kontrollstrukturen
scss css
@for $i from 1 through 3 { .item-1 {
.item-#{$i} { width: 2em;
width: 2em * $i; }
} .item-2 {
} width: 4em;
}
.item-3 {
width: 6em;
}
Sass & Compass – ©2011 Michael van Engelshoven

11. ko mm u n i k ati o n & s ys te m e
An open source CSS Authoring Framework
Sass & Compass – ©2011 Michael van Engelshoven

12. ko mm u n i k ati o n & s ys te m e
• Basiert auf SASS
• Bringt eine Menge Mixins mit
• Erweitert SASS mit einer Plugin-Schnittstelle
• Definierte Konfiguration eines Projektes
Einstieg SVN – ©2011 Michael van Engelshoven

13. ko mm u n i k ati o n & s ys te m e
Installation und Benutzung
$ gem update --system
$ gem install compass
$ compass create <myproject> --using blueprint
$ compass --watch
Einstieg SVN – ©2011 Michael van Engelshoven

14. ko mm u n i k ati o n & s ys te m e
Konfiguration: config.rb
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "public", "styles")
environment = :production
output_style = :compressed
Einstieg SVN – ©2011 Michael van Engelshoven

15. ko mm u n i k ati o n & s ys te m e
Einzeiler: Runde Ecken
scss css
.content-box {
.content-box {
-webkit-border-radius: 4px;
@include border-radius(4px);
-moz-border-radius: 4px;
}
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
Sass & Compass – ©2011 Michael van Engelshoven

16. ko mm u n i k ati o n & s ys te m e
Compass Module Imports
• CSS Reset
@import "compass/reset"
• Sticky Footer
@import "compass/layout/sticky-footer"
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-
footer")
Einstieg SVN – ©2011 Michael van Engelshoven

17. ko mm u n i k ati o n & s ys te m e
Sprites generieren
dateien css
public/images/icon/edit.png .icon-edit, .icon-delete {
public/images/icon/delete.png background: url('/images/icon-s34f.png');
background-repeat: no-repeat;
}
.icon-delete {
scss }
background-position: 0 0;
.icon-edit {
@import "icon/*.png";
background-position: 0 -32px;
@include all-icon-sprites;
}
Sass & Compass – ©2011 Michael van Engelshoven

18. ko mm u n i k ati o n & s ys te m e
Viel Spass!
Sass & Compass – ©2011 Michael van Engelshoven

19. ko mm u n i k ati o n & s ys te m e
Slides online ansehen
http://slidesha.re/nVbwel
Sass & Compass – ©2011 Michael van Engelshoven

20. ko mm u n i k ati o n & s ys te m e
Quellen
• SASS – Syntactically Awesome Stylesheets
http://sass-lang.com/
• Compass is an open-source CSS Authoring Framework
http://compass-style.org/
• Using Compass and Sass for CSS in your Next Project
http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/
Sass & Compass – ©2011 Michael van Engelshoven