in2code.deWir leben TYPO3
Wir leben TYPO3
CSS effektiver schreiben Sass/SCSS und Compass
in2code.deWir leben TYPO3
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.
in2code.deWir leben TYPO3
Was ist Sass und SCSS
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
Warum Sass und SCSS
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
UnterschiedeSass/SCSS
in2code.deWir leben TYPO3
SASS
• klassische Syntax, Focus auf
Minimalisierung
• verzichtet auf Klammern
• benötigt keine Semikolon
• arbeitet mit Einrückungen
(immer 4 Leerzeichen,
keine Tabs)
in2code.deWir leben TYPO3
SCSS
• Schreibweise basiert auf
normalen CSS
• verwendet Klammern und
Semikolon
• normales CSS kann einfach
einkopiert werden
in2code.deWir leben TYPO3
Hinweis
In einem Projekt kann man Sass
und SCSS auch gemischt
verwenden!
in2code.deWir leben TYPO3
So geht’s!
in2code.deWir leben TYPO3
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)
in2code.deWir leben TYPO3
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!
in2code.deWir leben TYPO3
Compilieren
Optionen:
Mit der Option --style kann man die CSS Datei auch
compressed oder compact kompilieren lassen.
in2code.deWir leben TYPO3
Was kann es:Variablen
in2code.deWir leben TYPO3
Variablen können definiert
und projektweit verwendet
werden, z.B.
• Farben
• Größen
• Abstände
• Fonts
• usw.
in2code.deWir leben TYPO3
Was kann es:Nesting
in2code.deWir leben TYPO3
• Übersichtliche Strukturierung durch Einrückung und
Verschachtelung von Tags, IDs und Klassen
• Linkattribute (hover usw.) lassen sich innerhalb des SCSS
referenzieren
in2code.deWir leben TYPO3
SCSS wird zu CSS:
in2code.deWir leben TYPO3
• Sehr praktisch: Mediaqueries direkt in der
entsprechenden Klasse schreiben
SCSS wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:Selektoren kombinieren
in2code.deWir leben TYPO3
Alle bekannten CSS-Selektoren können verwendet
werden! Z.B. > ~ + usw.
Platzhalterfunktion durch & (Ampersand)
Dieses holt den Elternselektor in den aktuellen Selektor.
in2code.deWir leben TYPO3
SCSS wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:Rechnen
in2code.deWir leben TYPO3
• einfache mathematische
Rechnungen
• Farben können
berechnet werden
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
Was kann es:@extend
in2code.deWir leben TYPO3
Komplette Definitionen von
Selektoren können in neue
Selektoren vererbt werden.
ACHTUNG:
Auch Eigenschaften von
Nested-Elementen werden
mitvererbt. Deshalb immer nur
eine Regel vererben!
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:@mixin und @include
in2code.deWir leben TYPO3
wiederkehrende Angaben
können mit
@mixin definiert und mit
@include immer wieder
verwendet werden
(sinnvoll für Standard-
formatierungen
z.B. runde Ecken)…
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
… zusätzlich
können auch hier
Variablen definiert
werden um z.B.
die gerundeten
Ecken flexibler zu
gestalten
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
ACHTUNG:
Die Vendor-Prefixes für
border-radius sind veraltet!
Die Angabe border-radius
alleine reicht auch!
in2code.deWir leben TYPO3
Was kann es:@import
in2code.deWir leben TYPO3
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.
in2code.deWir leben TYPO3
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.
in2code.deWir leben TYPO3
Strukturierung mit @import
Hinweis:
Dateien mit Unterstrich werden
vom Compiler nicht konvertiert.
Sinnvoll bei Dateien, die mit
@import beim Kompilieren
inkludiert werden.
in2code.deWir leben TYPO3
Strukturierung mit @import
Inhalt der Datei
questclub.scss
in2code.deWir leben TYPO3
Strukturierung mit @import
Wird kompiliert zu:
in2code.deWir leben TYPO3
Was kann es:@if und @else
in2code.deWir leben TYPO3
CSS wird abhängig von einer Variable erzeugt
SCSS wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:@for
in2code.deWir leben TYPO3
Berechnungen durch eine FOR-Schleife (z.B. Überschriften)
SCSS wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:@each
in2code.deWir leben TYPO3
Berechnungen
durch eine
EACH-Schleife
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
Was kann es:@function und @return
in2code.deWir leben TYPO3
Eigene Funktionen
können mit
@function und
@return
geschrieben
werden.
SCSS
wird zu CSS:
Verrückte Spielereien mit Funktionen und Schatten unter:
http://sassymothereffingtextshadow.com/
in2code.deWir leben TYPO3
Was kann es:Kommentarfunktionen
in2code.deWir leben TYPO3
Es gibt zwei Arten von
Kommentaren:
• Globale Kommentare /* */
(werden auch ins CSS
geschrieben)
• Interne Kommentar //
(werden nicht ins CSS
kompiliert)
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
Debugging
in2code.deWir leben TYPO3
• in der Ruby-Konsole
beim Konvertieren
• beim Reload der HTML-
Seite am Seitenbeginn
(da in CSS-Datei)
Rückmeldung bei einem Fehler
in2code.deWir leben TYPO3
Was ist Compass
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
So geht’s!
in2code.deWir leben TYPO3
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!
in2code.deWir leben TYPO3
Neues Projekt anlegen
compass create <projektname>
Legt ein neues Projekt an.
Compass erstellt folgende Struktur:
in2code.deWir leben TYPO3
Projekt konfigurieren
Die config.rb ist die Konfigurationsdatei für Compass.
in2code.deWir leben TYPO3
Meine Konfiguration
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
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/
in2code.deWir leben TYPO3
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/
in2code.deWir leben TYPO3
Die coolsten Features:CSS3 Mixins
in2code.deWir leben TYPO3
Beispiel: Text-Shadow und Background-Gradient
SCSS
Online-Demo: http://codepen.io/Huaba/full/LiqJe
in2code.deWir leben TYPO3
Beispiel: Text-Shadow und Background-Gradient
wird zu CSS:
Online-Demo: http://codepen.io/Huaba/full/LiqJe
in2code.deWir leben TYPO3
Beispiel: Text-Shadow und Background-Gradient
Sieht dann so aus:
Online-Demo: http://codepen.io/Huaba/full/LiqJe
in2code.deWir leben TYPO3
Alle CSS3 Mixins findet
man unter:
http://compass-style.org/refere
nce/compass
/css3/
in2code.deWir leben TYPO3
Die coolsten Features:Link-Colors
in2code.deWir leben TYPO3
In Compass
kann man
Linkfarben in
einer einzigen
Zeile angeben:
Online-Demo: http://codepen.io/Huaba/full/ojHFv
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
Die coolsten Features:Helpers
in2code.deWir leben TYPO3
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:
in2code.deWir leben TYPO3
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.
in2code.deWir leben TYPO3
Image Dimension Helpers
SCSS
wird zu CSS:
in2code.deWir leben TYPO3
Image Dimension Helpers
Sieht dann so aus:
vdr.jpg
speaker.png
Dateien im System:
in2code.deWir leben TYPO3
Die coolsten Features:Sprites – i love it
in2code.deWir leben TYPO3
Basic Usage
SCSS
Dateien im Projekt
Hiermit wird die Spritemap
und die dazugehörigen
CSS-Klassen automatisch
erzeugt.
in2code.deWir leben TYPO3
Basic Usage
wird zu CSS:
…und diesem Sprite:
in2code.deWir leben TYPO3
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:
in2code.deWir leben TYPO3
Selector Control
Im SCSS können die Sprites ebenso in eigenen Klassen
verwendet werden:
.zum-anfang {
@include icons-sprite(first);
}
Sieht dann so aus:
in2code.deWir leben TYPO3
Selector Control
Falls man ein einziges Sprite verschieben/korrigieren muss
(nicht die ganze Map!):
.zum-anfang {
@include icons-sprite(first,false,10,0);
}
Sieht dann so aus:
Bre
ite+
Höh
e de
s S
prite
s de
r K
lass
e ge
ben
Bild
nam
e
X-V
ersa
tz
Y-V
ersa
tz
in2code.deWir leben TYPO3
Magic Selector
SCSS
Dateien im Projekt
Hiermit werden Spritemaps
und CSS inklusive der
jeweiligen Zustände für
hover, active usw. erzeugt.
Erkannt werden diese
anhand der Dateinamen.
in2code.deWir leben TYPO3
Magic Selector
wird zu CSS:
…und diesem Sprite:
in2code.deWir leben TYPO3
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/
in2code.deWir leben TYPO3
Compass erweitern
in2code.deWir leben TYPO3
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.
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
Compass mit Plugins erweitern
Erzeugt dieses CSS:
Und dies im Dateisystem:
in2code.deWir leben TYPO3
Links
in2code.deWir leben TYPO3
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
in2code.deWir leben TYPO3
Und? Nicht cool?
Fragen? Dann Happy Styling
Martin Huber
Top Related