Sass/SCSS und Compass - CSS effektiver schreiben 2.0
1. Wir leben TYPO3
CSS effektiver schreiben
Sass/SCSS und Compass
Wir leben TYPO3 in2code.de
2. Was machen die bei in2code
Wir unterstützen TYPO3-,
Internet- und Full-Service
Agenturen genauso wie große
und mittelgroße Firmen, die
auf TYPO3 Spezialwissen
angewiesen sind.
Wir leben TYPO3 in2code.de
3. Was ist
Sass und SCSS
Wir leben TYPO3 in2code.de
4. Bedeutung und Funktion
• Metasprache zum Kompilieren von CSS
• existiert seit 2007
• bedeutet „Syntactically Awesome Stylesheets“
• SCSS (Sassy CSS = freches CSS) wird ab Sass 3.0
unterstützt und basiert auf CSS3
• Sass/SCSS wird mit dem HAML-Compiler
(Werkzeug in Ruby geschrieben) in CSS gewandelt
• Kostenlos, unter www.sass-lang.com gibt’s mehr
Wir leben TYPO3 in2code.de
6. Nachteile von normalem CSS
• CSS kann schnell unübersichtlich werden:
• Eigenschaften wiederholen sich häufig
• CSS wird oft doppelt geschrieben
• CSS umständlich bei einer globalen Änderung
• keine einheitliche Formatierung
• Performanceeinbußen bei Importen
Wir leben TYPO3 in2code.de
7. Vorteile von Sass/SCSS
• grundsätzliche Wert können zentral definiert werden
• SASS kann rechnen (z.B. Farben, Größen und Abstände)
• einmal eingetragene Eigenschaften können immer wieder
benutzt werden
• Compiler optimiert das generierte CSS
• Compiler prüft auf korrekte Syntax, erkennt Schreibfehler
• Importe ohne Performanceeinbußen
• übersichtlichere, einheitliche Schreibweise
Wir leben TYPO3 in2code.de
8. Unterschiede
Sass/SCSS
Wir leben TYPO3 in2code.de
9. SASS
• klassische Syntax, Focus auf
Minimalisierung
• verzichtet auf Klammern
• benötigt keine Semikolon
• arbeitet mit Einrückungen
(immer 4 Leerzeichen,
keine Tabs)
Wir leben TYPO3 in2code.de
10. SCSS
• Schreibweise basiert auf
normalen CSS
• verwendet Klammern und
Semikolon
• normales CSS kann einfach
einkopiert werden
Wir leben TYPO3 in2code.de
11. Hinweis
In einem Projekt kann man Sass
und SCSS auch gemischt
verwenden!
Wir leben TYPO3 in2code.de
13. Installation
1. Ruby und HAML installieren
Windows: http://rubyinstaller.org/downloads/
OSX: schon installiert
2. Sass-Unterstützung von HAML installieren
Ruby-Konsole (Windows) bzw. Terminal (OSX) öffnen
gem install sass (Windows) bzw.
sudo gem install sass (OSX)
Wir leben TYPO3 in2code.de
14. Compilieren
3. Um eine Datei zu kompilieren in der Ruby-
Konsole/Terminal in das Verzeichnis wechseln und die
Überwachung starten mit
sass --watch dateiname.scss:dateiname.css
4. Ganze Verzeichnisse können auch überwacht werden:
sass --watch ordername/scss:ordnername/css
Unter Windows mit anstatt / arbeiten!
Wir leben TYPO3 in2code.de
19. • Übersichtliche Strukturierung durch Einrückung und
Verschachtelung von Tags, IDs und Klassen
• Linkattribute (hover usw.) lassen sich innerhalb des
SCSS referenzieren
Wir leben TYPO3 in2code.de
21. • Sehr praktisch: Mediaqueries direkt in der
entsprechenden Klasse schreiben
SCSS wird zu CSS:
Wir leben TYPO3 in2code.de
22. Was kann es:
Selektoren kombinieren
Wir leben TYPO3 in2code.de
23. Alle bekannten CSS-Selektoren können verwendet
werden! Z.B. > ~ + usw.
Platzhalterfunktion durch & (Ampersand)
Dieses holt den Elternselektor in den aktuellen Selektor.
Wir leben TYPO3 in2code.de
27. Weiter Funktionen zur Farbberechnung
• Farben mischen mit mix
• Sättigung ändern mit saturate
• Transparenz mit transparentize berechnen
• u.v.m
Alle Funktionen unter
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
Wir leben TYPO3 in2code.de
29. SCSS
Komplette Definitionen von
Selektoren können in neue
Selektoren vererbt werden.
ACHTUNG:
Auch Eigenschaften von
Nested-Elementen werden wird zu CSS:
mitvererbt. Deshalb immer nur
eine Regel vererben!
Wir leben TYPO3 in2code.de
30. Was kann es:
@mixin und @include
Wir leben TYPO3 in2code.de
31. SCSS
wiederkehrende Angaben
können mit
@mixin definiert und mit
@include immer wieder
verwendet werden
(sinnvoll für Standard- wird zu CSS:
formatierungen
z.B. runde Ecken)…
Wir leben TYPO3 in2code.de
32. SCSS
… zusätzlich
können auch hier
Variablen definiert
werden um z.B.
die gerundeten
Ecken flexibler zu wird zu CSS:
gestalten
Wir leben TYPO3 in2code.de
35. Gegen über @import in CSS werden importierte Dateien
mit in die Datei „einkompiliert“!
Dadurch keine Performanceeinbußen wie in CSS durch
zusätzliche HTTP-Referrers.
Mit @import in Sass kann ein Projekt optimial
strukturiert werden.
Wir leben TYPO3 in2code.de
36. Echte Imports mit @import
• wiederkehrende Angaben/Variablen können in eigene
Datei gespeichert werden
• Aufsplittung in kleine „Bereiche“ mit sinnvoller Benennung
@import „dateiname“;
Importiert den Inhalt angegebenen Datei beim Kompilieren
an dieser Stelle.
Wir leben TYPO3 in2code.de
37. Strukturierung mit @import
Hinweis:
Dateien mit Unterstrich werden
vom Compiler nicht konvertiert.
Sinnvoll bei Dateien, die mit
@import beim Kompilieren
inkludiert werden.
Wir leben TYPO3 in2code.de
46. Was kann es:
@function und @return
Wir leben TYPO3 in2code.de
47. SCSS
Eigene Funktionen
können mit
@function und
@return
geschrieben wird zu CSS:
werden.
Verrückte Spielereien mit Funktionen und Schatten unter:
http://sassymothereffingtextshadow.com/
Wir leben TYPO3 in2code.de
48. Was kann es:
Kommentarfunktionen
Wir leben TYPO3 in2code.de
49. SCSS
Es gibt zwei Arten von
Kommentaren:
• Globale Kommentare /* */
(werden auch ins CSS
geschrieben)
wird zu CSS:
• Interne Kommentar //
(werden nicht ins CSS
kompiliert)
Wir leben TYPO3 in2code.de
51. Rückmeldung bei einem Fehler
• in der Ruby-Konsole
beim Konvertieren
• beim Reload der HTML-
Seite am Seitenbeginn
(da in CSS-Datei)
Wir leben TYPO3 in2code.de
53. Compass erweitert Sass
Compass ist ein Framework für Sass.
Es erweitert Sass um etliche CSS3 Funktionen und nützliche
CSS Features.
Beispiele:
• Einfachste Anwendung von Sprites
• CSS3 für alle Browser in einer Zeile
Wir leben TYPO3 in2code.de
55. Installation von Compass
Sass muss installiert sein (aber das haben wir schon)
Ruby-Konsole (Windows) bzw. Terminal (OSX) öffnen
gem install compass (Windows) bzw.
sudo gem install compass (OSX)
Fertig!
Wir leben TYPO3 in2code.de
56. Neues Projekt anlegen
compass create <projektname>
Legt ein neues Projekt an.
Compass erstellt folgende Struktur:
Wir leben TYPO3 in2code.de
59. Compass in Sass importieren
Das es sich bei Compass um „Sass-Mixins“ handelt, müssen
wir diese zuerst in unseren Sass-Dateien importieren um die
Funktionen nutzen zu können:
@import „compass“
Hier werden alle Compass-Funktionen importiert.
@import „compass/css3“
Importiert z.B. nur die CSS3-Mixins
Wir leben TYPO3 in2code.de
60. Compass nutzen
Grundsätzlich werden Compass-Mixins mit
@include <mixin-name>
innerhalb eines Selektors in der Sass-Datei aufgerufen.
Alle „Features“ gibt es unter.
http://compass-style.org/reference/compass/
Wir leben TYPO3 in2code.de
61. Cross-Browser Support konfigurieren
Das Verhalten von Compass kann beeinflussen. Z.B:
$experimental-support-for-svg: true;
innerhalb einer Sass-Datei eines Projekts aktiviert das
Generieren von SVG-Hintergründen für IE, der keinen
Background-Gradient kann.
Alle „Features“ gibt es unter:
http://compass-style.org/reference/compass/support/
Wir leben TYPO3 in2code.de
68. SCSS
In Compass
kann man wird zu CSS:
Linkfarben in
einer einzigen
Zeile angeben:
Online-Demo: http://codepen.io/Huaba/full/ojHFv
Wir leben TYPO3 in2code.de
70. Image URL
Anstatt url kann man Compass die Pfade mit image-url
anpassen lassen. Somit können später Verzeichnisse
problemlos umbenannt werden.
SCSS
wird zu CSS:
Wir leben TYPO3 in2code.de
71. Image Dimension Helpers
Mit image-height und image-width können die Höhe
und Breite von Bildern ausgelesen werden.
Mit inline-image(„bildname.png“) kann man Bilder
auch als Inlinebilder berechnen lassen.
Wir leben TYPO3 in2code.de
77. Basic Usage
Nun können die erzeugten Klassen bei Bedarf erweitert
werden und im HTML-Markup verwendet werden:
<p class=„icons-first“>Zum Anfang</p>
Sieht dann so aus:
Wir leben TYPO3 in2code.de
78. Selector Control
Im SCSS können die Sprites ebenso in eigenen Klassen
verwendet werden:
.zum-anfang {
@include icons-sprite(first);
}
Sieht dann so aus:
Wir leben TYPO3 in2code.de
79. Selector Control
Falls man ein einziges Sprite verschieben/korrigieren muss
(nicht die ganze Map!):
.zum-anfang {
@include icons-sprite(first,false,10,0);
Bildname
geben
Breite+Höhe des
Sprites der Klasse
X-Versatz
Y-Versatz
}
Sieht dann so aus:
Wir leben TYPO3 in2code.de
80. Magic Selector
Dateien im Projekt
Hiermit werden Spritemaps
und CSS inklusive der
jeweiligen Zustände für
hover, active usw. erzeugt.
SCSS
Erkannt werden diese
anhand der Dateinamen.
Wir leben TYPO3 in2code.de
82. Sprites konfigurieren
Einige Einstellmöglichkeiten:
$<map>-spacing //Abstände in px um die Sprites
$<map>-<sprite>-spacing //Abstände um ein best. Sprites
$<map>-layout //Layout der Map: horizontal,
diagonal oder smart ist möglich
Mehr Optionen unter:
http://compass-style.org/help/tutorials/spriting/customization-options/
Wir leben TYPO3 in2code.de
84. Compass mit Plugins erweitern
Compass kann mit Plugins erweitert werden!
Viele Plugins unter: http://bit.ly/fAzE7b
Ein Beispiel: RGBAPNG-Plugin:
https://github.com/aaronrussell/compass-rgbapng
Dieses Plugin bringt Cross-Browser Support für RGBA.
Wir leben TYPO3 in2code.de
85. Compass mit Plugins erweitern
Installation mit: gem install compass-rgbapng
Auf Mac: sudo gem install compass-rgbapng
Anschließend in der config.rb hinzufügen:
require „rgbapng“
Verwendung im SCSS mit
Wir leben TYPO3 in2code.de
86. Compass mit Plugins erweitern
Erzeugt dieses CSS:
Und dies im Dateisystem:
Wir leben TYPO3 in2code.de
88. Weitere Hilfe im Netz
Sass: http://www.sass-lang.com
Sass Examples: http://thesassway.com
Compass: http://www.compass-style.org
Plugins für Compass: http://bit.ly/fAzE7b
Rubyinstaller für Windows: http://www.rubyinstaller.org
Wir leben TYPO3 in2code.de
89. Und? Nicht cool?
Fragen?
Dann Happy Styling
Martin Huber
Wir leben TYPO3 in2code.de