Das Dokument ist eine Einführung in die Verwendung von SCSS für die Hacker School in Bremen, die die Vorteile und Möglichkeiten von SCSS im Vergleich zu CSS beschreibt. Es werden Konzepte wie Verschachtelung, Variablen, Media Queries und Mixins erläutert, die die Wartung und Pflege von Stylesheets erleichtern können. Zudem wird auf nützliche Ressourcen und Bibliotheken verwiesen, die die Arbeit mit SCSS unterstützen.

1. Eine kurze Einführung
Nico Schober
für die Hacker School Bremen
12.10.2014
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

2. HTML & CSS
ist keine
Programmierung
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.
schober

3. CSS IST NETT,
ABER...
● Es fehlen ein paar Features
● Viel Wiederholung
● Schwierig zu pflegen / warten
● Alles wiederholt sich sich
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

4. SCSS
ul{
padding: 0;
li{
color: blue;
a.link{
text-decoration: none;
color: black;
}
}
a{
color: #C0FFEE;
}
}
CSS
ul{
padding: 0; }
ul li {
color: blue; }
ul li a.link{
text-decoration: none;
color: black; }
ul a {
color: #C0FFEE; }
VERSCHACHTELUNG
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

5. SCSS
a.mein-link {
&:hover{ text-decoration:
underline; }
&:before, &:after{
content: "—";
}
&.active{
color: #f00;
&:hover{
color: black;
}
}
}
CSS
a.mein-link:hover{ text-decoration:
underline; }
a.mein-link:before, a:hover{
content: ""; }
a.mein-link.active{ color: #f00; }
a.mein-link.active:hover{ color:
black; }
VERSCHACHTELUNG & OPERATOREN
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

6. VARIABLEN
SCSS
$font-main: "Fira Sans", Helvetica, "Comic Sans MS";
$font-head: "Droid Serif", Prestige, sans-serif;
$font-mono: Courier, mono;
$font-size-body: 67,5%;
$font-size-large: 32px;
$font-size-main: 1em;
$prim1: #C0FFEE;
$prim2: #F00BAA;
$prim3: #B00B1E;
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

7. MEDIA QUERIES
SCSS
.modul{
width: 100%;
padding: 1em;
@media screen and (min-width: 480px){
width: 50%;
padding: 0;
float: left;
}
@media screen and (min-width: 480px){
width: 30%;
padding: 2em;
}
}
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

8. MEDIA QUERIES
CSS
.modul {
width: 100%;
padding: 1em;
} @media screen and (min-width: 480px) {
.modul {
width: 50%;
padding: 0;
float: left;
}
} @media screen and (min-width: 480px) {
.modul {
width: 30%;
padding: 2em;
}
}
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

9. SCSS
@mixin inline-block{
display: inline;
*zoom: 1;
display: inline-block;
}
.mein-element{
width: 300px;
@include inline-block;
}
.mein-anderes-element{
width: 200px;
@include inline-block;
}
CSS
.mein-element{
width: 300px;
display: inline;
*zoom: 1;
display: inline-block;
}
.mein-anderes-element{
width: 200px;
display: inline;
*zoom: 1;
display: inline-block;
}
MIXINS
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

10. ● CSS Klassen lassen sich verschachteln
● Werte können in $variablen gespeichert werden
● Wiederkehrende Elemente lassen sich mit @mixin's
einfügen
● Ein @mixin kann auch mit Parametern aufgerufen
werden
● Es gibt Mixin-Bibliotheken wie Compass oder
Bourbon, die bereits viele Mixins mitbringen
● Funktionen können viel Arbeit ersparen...
● ... und für uns rechnen
● Vererbung ist super
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

11. AUF ZU
http://codepen.io/schobiwan/pen/wjsxo/
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober

12. http://sass-lang.com/guide
http://sassmeister.com/
http://codepen.io/
http://bestwebsite.gallery/
http://www.cssdesignawards.com/
http://unmatchedstyle.com/
http://css-tricks.com/
info@nicoschober.com
https://twitter.com/schobi
https://www.facebook.com/nico.schober
FRAGEN?