SASS und Compass. Struktur für eure Stylesheets

Transkript

1 SASS und Compass Struktur für eure Stylesheets

2 Guten Tag Thomas Moseler Frontend-Developer

3 Warum?

4 .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler {.page-home.view-portraits-statement-startseite.views-field-field-statement {.page-home.view-portraits-statement-startseite.views-field-field-statement.field-content {..page-home.view-portraits-statement-startseite.views-field-field-statement p {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item.active {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item.active li {

5 .page-home.view-portraits-statement-startseite.views-field-field-image-undpauler {.page-home.view-portraits-statement-startseite.views-field-field-statement {.page-home.view-portraits-statement-startseite.views-field-field-statement.field-content {..page-home.view-portraits-statement-startseite.views-field-field-statement p {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item.active {.page-home.views-slideshow-controls-bottom.views-slideshow-pager-field-item.active li {

6 #menu { #menu ul { #menu ul li {. #menu ul li a { #menu ul li a span {

7 a:hover, a:active { color: #77B302; li a.active { color: #77B302; h1, h2, h3, h4, h5, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited { color: #77B302; #sidebar-right.view-comments-recent.views-row a:hover, #sidebar-right.view-comments-recent.views-row a:active { color: #77B302;.page-home.view-portraits-statement-startseite.views-field-fieldstatement { color: #77B302;

8 Don't repeat yourself!

9 Probleme von CSS Unstukturiert rein additiv Bietet keine Progammierlogik Durchblick durch ein fremdes Stylesheet mit Zeilen?

10 Was ist SASS? Übersetzung: Syntactically Awesome Stylesheets CSS-Präprozessor Wird in CSS kompiliert CSS ist eine Untermenge von SASS Man kann also normales CSS in SASS-Dateien hineinschreiben, und Schritt für Schritt SASS-Befehle hinzufügen. Es gibt auch noch LESS, das ist ähnlich Ausführlicher Vergleich:

11 Was ist Compass? Vor allem eine Bibliothek aufbauend auf SASS Es gibt jede Menge vordefinierte Elemente, die man wiederverwenden kann spart noch mehr Arbeit

12 Warum gleich Compass verwenden statt nur SASS? Ich kann die ganzen Compass-Goodies verwenden, muß aber nicht Benutzt sich genauso wie SASS, wenn ich die Compass-Bibliothek nicht verwende

13 Installation Man braucht Ruby und Ruby Gems Es gibt auch PHP-Versionen, die nicht ganz so aktuell sind. Dadurch auch auf Online-Server installierbar. Interessant wenn ihr gewohnt seid direkt auf dem Server zu arbeiten Auf Mac: Ruby schon vorhanden Auf PC: je nach Geschmack, ich benutze Cygwin Noch einfacher: braucht allerdings Java, und wenn das nicht im Standard-Pfad installiert ist, wird s auch gleich wieder fummelig. Man muß dann in [ScoutInstallDir]\javascripts\app\process_interaction.js den Pfad zur Java.exe (respektive entsprechender Name aufm Mac) anpassen.

14 Zwei verschiedene Möglickeiten der Syntax SASS [Demo].sass ul#main-menu li padding: 0 a text-decoration: none &:hover background: #FFA40B SCSS.scss ul#main-menu { li { padding: 0; a { text-decoration: none; &:hover { background: #FFA40B;

15 Aufsetzen des Kompilierens mit Compass Compass config [Demo] /config/config.rb http_path = "/" css_dir = "../css" sass_dir = "../sass" images_dir = "images" javascripts_dir = "javascripts"

16 Kompilieren Manuell compass compile config Automatisch compass watch config

17 Ist das nicht schön Zeilennummer der Herkunftszeile in der.scss Datei wird angegeben /* line 24,../sass/style.scss */ html, body { Error reporting [Demo] error sass/style.scss (Line 35: Undefined mixin 'hello-susy'.)

18 Zwei verschiedene Arten von Kommentaren Nur in der.scss Datei sichtbar // Dieser Kommentar ist nur in der Quelldatei sichtbar html, body { Wird beim Kompilieren in die.css Datei übernommen /* Dies ist ein normaler CSS-Kommentar, daher wird er auch beim Kompilieren übertragen. */ html, body {

19 Zwei verschiedene Arten von Kommentaren Nur in der.scss Datei sichtbar // Dieser Kommentar ist nur in der Quelldatei sichtbar html, body { Wird beim Kompilieren in die.css Datei übernommen /* Dies ist ein normaler CSS-Kommentar, daher wird er auch beim Kompilieren übertragen. */ html, body {

20 Drei Dinge braucht mein CSS Variablen Verschachtelung Mixins

21 Variablen z.b. für Farbwerte $font-base-color: #444; $primary-color: #22A81F; Wie wäre es mit Schriftgrößen und dem Font-Stack? $font-base-size: 12px; $font-size-minus-one: 0.93em; $font-size-minus-two: 0.83em; $font-family-copy: verdana, arial, helvetica, sans-serif; $font-family-headlines: trebuchet ms, arial, helvetica, sans-serif;

22 Verschachtelung Man verschachtelt mit mehreren Klammern, SASS übersetzt auch das in flaches CSS #menu { ul { padding: 0; li { display: inline; margin-right: 5px; a { display: inline-block; background: $light-grey; border: 1px solid #ddd; padding: 3px 6px;

23 Verschachtelung Keine Wiederholungen Liest sich wie HTML

24 Mixins ermöglichen komplexere Funktionen und das Ersetzen von größeren Code-Blöcken Vom Aufbau wie eine Funktion in PHP: man kann Argumente in das Mixin hineingeben Wird eingebunden [Name-des-Mixins], wobei Name-des-Mixins kein Dollarzeichen oder ähnliches tommi-border-radius ($radius: 20px) { border-radius: $radius; webkit-border-radius: $radius; moz-border-radius: $radius; ( tommi-border-radius;

25 Mixins aus Compass Genau hier kommt Compass ins Spiel: z.b. Mixins für borderradius, box-shadow oder viele andere CSS3-Effekte sind schon vorhanden compass/typography; ( border-radius; #menu ul horizontal-list(5px, left); Anspieltips: Sprites: erzeugt aus einzelnen Bildern Sprites. Sehr abgefahren.

26 Farbpalette definieren ( ) <div class= orange-150 ></div> <div class= orange ></div> <div class= orange-50 ></div> (...).orange { background: $main-orange;.orange-50 { background: lighten($main-orange, 25%);.orange-25 { background: lighten($main-orange, 37.5%);.orange-150 { background: darken($main-orange, 12%);.orange-200 { background: darken($main-orange, 20%); Das abstrahieren wir noch ein bisschen mehr...

27 Farbpalette definieren <div class="orange darken-200"></div> <div class="orange darken-150"></div> <div class="orange"></div> <div class="orange lighten-50"></div> <div class="orange lighten-25"></div> Die Klasse für die Grundfarbe wird von der Klasse für die Farbabstufung getrennt. So können wir auch eine andere Farbe einsetzen und dafür die Farbabstufungen erzeugen.

28 Abstufungen unabhängig von Farbe $lighten-50: 25%; $lighten-25: 37.5%; $darken-150: 12%; $darken-200: 20%;.orange { $palette-color: $main-orange; // enter the color for this palette here background: $palette-color; &.lighten-50 { background: lighten($palette-color, $lighten-50); &.lighten-25 { background: lighten($palette-color, $lighten-25); &.darken-150 { background: darken($palette-color, $darken-150); &.darken-200 { background: darken($palette-color, $darken-200); Das &-Zeichen innerhalb des Nestings bewirkt, daß die zwei Klassen als.orange.orange- 50 direkt hintereinander geschrieben werden: sie befinden sich am gleichen Element.

29 Abstufungen unabhängig von Farbe Das ist mir aber immer noch nicht effizient genug. Definieren wir ein color-palette ($palette-color: #888) { $lighten-50: 25%; $lighten-25: 37.5%; $darken-150: 12%; $darken-200: 20%; background: $palette-color; &.lighten-50 { background: lighten($palette-color, $lighten-50); &.lighten-25 { background: lighten($palette-color, $lighten-25); &.darken-150 { background: darken($palette-color, $darken-150); &.darken-200 { background: darken($palette-color, $darken-200);

30 Das sieht doch schon ganz anders aus... Nun können wir mit wenigen Zeilen Code für verschiedene Farben unsere Abstufungen definieren. /**** Farben ***/ $main-orange: #E06003; $medium-blue: #3496ED; /*** Paletten-Definitionen ***/.orange color-palette ($main-orange);.medium-blue color-palette ($medium-blue);.grey color-palette;

31 Das eröffnet Möglichkeiten Diese dynamische Definition von Farbenermöglicht ein ganz anderes Arbeiten. Vor allem in der Konzeptionsphase möchte man die Farben vielleicht ändern oder andere Kombinationen ausprobieren. [ Demo ]

32 Was noch alles geht If-Statements Berechnungen und, und, und... Weiterführende Links Sehr schönes Einführungsvideo: Tutorial auf der Projektseite von SASS Compass