Eine kurze Einführung in SASS

12
Eine kurze Einführung Nico Schober für die Hacker School Bremen 12.10.2014 [email protected] https://twitter.com/schobi https://www.facebook.com/nico.schober

description

Eine kurze Einführung in SASS für die #hackerschool14 in Bremen

Transcript of Eine kurze Einführung in SASS

Page 1: Eine kurze Einführung in SASS

Eine kurze Einführung

Nico Schoberfür die Hacker School Bremen

12.10.2014

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 3: Eine kurze Einführung in SASS

CSS IST NETT, ABER...● Es fehlen ein paar Features

● Viel Wiederholung

● Schwierig zu pflegen / warten

● Alles wiederholt sich sich

● Starr und unflexibel

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 4: Eine kurze Einführung in SASS

SCSSul{ padding: 0; li{ color: blue; a.link{ text-decoration: none; color: black; } } a{ color: #C0FFEE; }}

CSSul{ padding: 0; }ul li { color: blue; }ul li a.link{ text-decoration: none; color: black; }ul a { color: #C0FFEE; }

VERSCHACHTELUNG

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 5: Eine kurze Einführung in SASS

SCSSa.mein-link { &:hover{ text-decoration: underline; } &:before, &:after{ content: "—"; } &.active{ color: #f00; &:hover{ color: black; } }}

CSSa.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

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 6: Eine kurze Einführung in SASS

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;

VARIABLEN

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 7: Eine kurze Einführung in SASS

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; }}

MEDIA QUERIES

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 8: Eine kurze Einführung in SASS

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; }}

MEDIA QUERIES

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 9: Eine kurze Einführung in SASS

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

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober

Page 10: Eine kurze Einführung in SASS

● 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

[email protected]://twitter.com/schobi

https://www.facebook.com/nico.schober