Sass/SCSS und Compass - CSS effektiver schreiben 2.0

89
in2code.de Wir leben TYPO3 Wir leben TYPO3 CSS effektiver schreiben Sass/SCSS und Compass

description

Webseiten entwickeln und erstellen: CSS effektiver schreiben mit Hilfe von Sass/SCSS oder dem Framework Compass.

Transcript of Sass/SCSS und Compass - CSS effektiver schreiben 2.0

Page 1: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Wir leben TYPO3

CSS effektiver schreiben Sass/SCSS und Compass

Page 2: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 3: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was ist Sass und SCSS

Page 4: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 5: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Warum Sass und SCSS

Page 6: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 7: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 8: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

UnterschiedeSass/SCSS

Page 9: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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)

Page 10: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

SCSS

• Schreibweise basiert auf

normalen CSS

• verwendet Klammern und

Semikolon

• normales CSS kann einfach

einkopiert werden

Page 11: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Hinweis

In einem Projekt kann man Sass

und SCSS auch gemischt

verwenden!

Page 12: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

So geht’s!

Page 13: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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)

Page 14: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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!

Page 15: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Compilieren

Optionen:

Mit der Option --style kann man die CSS Datei auch

compressed oder compact kompilieren lassen.

Page 16: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:Variablen

Page 17: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Variablen können definiert

und projektweit verwendet

werden, z.B.

• Farben

• Größen

• Abstände

• Fonts

• usw.

Page 18: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:Nesting

Page 19: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 20: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

SCSS wird zu CSS:

Page 21: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

• Sehr praktisch: Mediaqueries direkt in der

entsprechenden Klasse schreiben

SCSS wird zu CSS:

Page 22: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:Selektoren kombinieren

Page 23: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 24: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

SCSS wird zu CSS:

Page 25: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:Rechnen

Page 26: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

• einfache mathematische

Rechnungen

• Farben können

berechnet werden

SCSS

wird zu CSS:

Page 27: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 28: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@extend

Page 29: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 30: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@mixin und @include

Page 31: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 32: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 33: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

ACHTUNG:

Die Vendor-Prefixes für

border-radius sind veraltet!

Die Angabe border-radius

alleine reicht auch!

Page 34: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@import

Page 35: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 36: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 37: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 38: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Strukturierung mit @import

Inhalt der Datei

questclub.scss

Page 39: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Strukturierung mit @import

Wird kompiliert zu:

Page 40: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@if und @else

Page 41: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

CSS wird abhängig von einer Variable erzeugt

SCSS wird zu CSS:

Page 42: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@for

Page 43: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Berechnungen durch eine FOR-Schleife (z.B. Überschriften)

SCSS wird zu CSS:

Page 44: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@each

Page 45: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Berechnungen

durch eine

EACH-Schleife

SCSS

wird zu CSS:

Page 46: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:@function und @return

Page 47: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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/

Page 48: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was kann es:Kommentarfunktionen

Page 49: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 50: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Debugging

Page 51: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 52: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Was ist Compass

Page 53: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 54: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

So geht’s!

Page 55: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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!

Page 56: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Neues Projekt anlegen

compass create <projektname>

Legt ein neues Projekt an.

Compass erstellt folgende Struktur:

Page 57: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Projekt konfigurieren

Die config.rb ist die Konfigurationsdatei für Compass.

Page 58: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Meine Konfiguration

Page 59: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 60: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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/

Page 61: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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/

Page 62: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Die coolsten Features:CSS3 Mixins

Page 63: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Beispiel: Text-Shadow und Background-Gradient

SCSS

Online-Demo: http://codepen.io/Huaba/full/LiqJe

Page 64: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Beispiel: Text-Shadow und Background-Gradient

wird zu CSS:

Online-Demo: http://codepen.io/Huaba/full/LiqJe

Page 65: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Beispiel: Text-Shadow und Background-Gradient

Sieht dann so aus:

Online-Demo: http://codepen.io/Huaba/full/LiqJe

Page 67: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Die coolsten Features:Link-Colors

Page 68: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 69: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Die coolsten Features:Helpers

Page 70: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 71: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 72: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Image Dimension Helpers

SCSS

wird zu CSS:

Page 73: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Image Dimension Helpers

Sieht dann so aus:

vdr.jpg

speaker.png

Dateien im System:

Page 74: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Die coolsten Features:Sprites – i love it

Page 75: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Basic Usage

SCSS

Dateien im Projekt

Hiermit wird die Spritemap

und die dazugehörigen

CSS-Klassen automatisch

erzeugt.

Page 76: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Basic Usage

wird zu CSS:

…und diesem Sprite:

Page 77: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 78: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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:

Page 79: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 80: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 81: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Magic Selector

wird zu CSS:

…und diesem Sprite:

Page 82: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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/

Page 83: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Compass erweitern

Page 84: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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.

Page 85: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 86: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Compass mit Plugins erweitern

Erzeugt dieses CSS:

Und dies im Dateisystem:

Page 87: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Links

Page 88: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

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

Page 89: Sass/SCSS und Compass - CSS effektiver schreiben 2.0

in2code.deWir leben TYPO3

Und? Nicht cool?

Fragen? Dann Happy Styling

Martin Huber