eine kurze einführung in sass
DESCRIPTION
Eine kurze Einführung in SASS für die #hackerschool14 in BremenTRANSCRIPT
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
HTML & CSSist keine Programmierung
[email protected]://twitter.com/schobi
https://www.facebook.com/nico.schober
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
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
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
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
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
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
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
● 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
AUF ZU
http://codepen.io/schobiwan/pen/wjsxo/
[email protected]://twitter.com/schobi
https://www.facebook.com/nico.schober
http://sass-lang.com/guidehttp://sassmeister.com/
http://codepen.io/
http://bestwebsite.gallery/http://www.cssdesignawards.com/http://unmatchedstyle.com/
http://css-tricks.com/
[email protected]://twitter.com/schobi
https://www.facebook.com/nico.schober
FRAGEN?