sass und scss - css effektiv schreiben
DESCRIPTION
UPDATE: die Version 2.0 des Vortrags inkl. Compass: http://de.slideshare.net/huabanet/sassscss-und-compass-css-effektiver-schreiben-20 Mein Vortrag "SASS und SCSS - CSS effektiv schreiben" vom TYPO3 Camp 2011TRANSCRIPT
in2code.deWir leben TYPO3
Wir leben TYPO3
SASS und SCSSCSS effektiv schreiben
in2code.deWir leben TYPO3
Was machen die bei in2code?
Alex Kellner
Wir leben TYPO3
Wir unterstützen TYPO3- , Internet- und Full-Service-Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind.
TYPO3
Extensions
Entwicklung
Fluid
Security
Performance
Workshops
FLOW3Martin HuberMarcus
Schwemer
Michael Cannon
Stefan BusemannMarkus Rodler
David Richter
Tina Gasteiger
Consulting
in2code.deWir leben TYPO3
Was ist SASS/SCSS
Bedeutung und Funktion
• SASS ist eine Metasprache zum Kompilieren von CSS
• bedeutet „Syntactically Awesome Stylesheets“
• existiert seit 2007
• 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
in2code.deWir leben TYPO3
Warum SASS/SCSS
Nachteile von normalem CSS
• CSS kann schnell unübersichtlich werden
• Eigenschaften wiederholen sich häufig (z.B. bei Listen, Eckenradius)
• CSS wird oft doppelt geschrieben (z.B. wenn Selektoren nicht gruppiert
werden)
• Selektoren können extrem lang werden
• CSS umständlich bei einer Änderung von grundsätzlichen Angaben (z.B.
Farben, Abstände)
• keine einheitliche Formatierung (einzeilig, zweizeilig, mit und ohne
Einrückung)
• Performanceeinbußen bei Importen von weiteren CSS-Dateien
in2code.deWir leben TYPO3
Warum SASS/SCSS
Vorteile gegenüber CSS?
• grundsätzliche Vorgaben (z.B. Farben, Größen usw. 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
• der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)
• der Compiler prüft auf korrekte Syntax, erkennt Schreibfehler
• Importe von anderen SCSS/SASS-Dateien übernimmt der Compiler, somit
keine Performanceeinbußen
• übersichtliche, einheitliche Schreibweise
in2code.deWir leben TYPO3
Unterschiede SASS und SCSS
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
Unterschiede SASS und SCSS
SCSS
• Schreibweise basiert auf normalen CSS
• verwendet Klammern und Semikolon
• normales CSS kann einfach einkopiert werden
Hinweis:
In einem Projekt kann man auch SASS und SCSS
mischen!
in2code.deWir leben TYPO3
Variablen
Variablen
• Variablen (Farben, Größen
usw.) können definiert und
immer verwendet werden
in2code.deWir leben TYPO3
Verschachteln und Referenzierung
Nesting
• durch Einrückungen und Verschachtelung von Tags, IDs und Klassen
lassen sich Angaben übersichtlich strukturieren
• Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren
in2code.deWir leben TYPO3
Einrücken und verschachteln
è
in2code.deWir leben TYPO3
Funktionen
Funktionen
• einfache mathematische Rechnungen sind
möglich: Addieren +, Subtrahieren -,
Multiplizieren * und Dividieren /
• auf Farben können berechnet werden
è
in2code.deWir leben TYPO3
Funktionen
Weitere Funktionen zur Farbberechnungen
• 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
Definieren und einbinden
@mixin und @include
• wiederkehrende Angaben können mit
@mixin definiert und mit @include immer
wieder verwendet werden (sinnvoll für
Standardformatierungen z.B. runde Ecken)
è
in2code.deWir leben TYPO3
Definieren und einbinden
@mixin und @include
• zusätzlich können auch hier
Variablen definiert werden um
z.B. die gerundeten Ecken
flexibler zu gestalten
è
in2code.deWir leben TYPO3
Vererben und erweitern
@extend
• komplette Definitionen von
Selektoren können in neue
Selektoren vererbt werden
ACHTUNG:
auch Eigenschaften von Nested-
Elemnten werden mitvererbt
è
in2code.deWir leben TYPO3
Auslagern und einbinden – echte Imports
• wiederkehrende Werte (z.B. feste Angaben oder Variablen) können in eigene
Datei gespeichert werden und beim Compilieren wieder importiert / inkludiert
werden.
Z.B. Variablen in die Datei _settings.sass oder _settings.scss ausgelagert.
Achtung beim Einbinden:
@import „settings“ // diese Angabe bei SASS verwenden
@include „_settings.scss“ // diese Angabe bei SCSS verwenden
Hinweis: Dateien mit Unterstrich werden vom Compiler nicht konvertiert.
Sinnvoll bei ausgelagerten und später inkludierten Dateien!
in2code.deWir leben TYPO3
Kontrollstrukturen
@if
• CSS wird abhängig von einer Variable
erzeugtè
in2code.deWir leben TYPO3
Kontrollstrukturen
@for
• Berechnungen für CSS durch eine
Schleife ausführen lassen
• praktisch bei Überschriften
è
in2code.deWir leben TYPO3
Kommentare benutzen
Globale Kommentare
• Kommentare mit Slash und Stern bleiben
erhalten
Interne Kommentar
• Kommentare mit Doppel-Slash sind nach
dem Kompilieren nicht in der CSS-Datei
sichtbar
è
in2code.deWir leben TYPO3
So geht‘s!
1. Um dies nutzen zu können muss Ruby und HAML installiert sein.
• Windows Installer unter: http://rubyinstaller.org/download.html
• bei OS X ist Ruby installiert
2. SASS-Unterstützung von HAML installieren
• Ruby-Konsole öffnen und mit „gem install sass“ wird HAML
installiert
in2code.deWir leben TYPO3
So geht‘s!
3. Um eine Datei (z.B. style.scss) zu konvertieren in der Ruby-Konsole zum
jeweiligen Verzeichnis wechseln und die Überwachung der Datei mit
„sass --watch style.scss:style.css“ starten.
4. Mit „sass --watch stylesheets/scss:stylesheets/css“
können ganze Verzeichnisse auf Dateien überwacht werden.
Achtung: bei Windows muss mit \ anstatt / gearbeitet werden!
Optionen: mit --style kann die CSS auch als compressed oder compact
erzeugt werden.
in2code.deWir leben TYPO3
Debugging
Rückmeldung bei Fehler in einer
Datei:
• in der Ruby-Konsole beim Konvertieren
• beim Reload der HTML-Seite am
Seitenbeginn (da in CSS-Datei
geschrieben)
Häufige Fehlerquellen:
• Klammern, Semikolon, Leerzeichen
oder Einrückung, fehlende Variablen
in2code.deWir leben TYPO3
Nachteile
• Editorsupport ist noch etwas mager
• Wenn direkt in den CSS-Dateien korrigiert wird, werden diese bei
Änderungen in der SASS/SCSS-Datei überschreiben
• Debugging umständlicher (Zeilenangabe in z.B. Firebug stimmt nicht
mit SASS-Datei überein; wenn lokal entwickelt wird kann man mit
FireSASS für Firefox debuggen)
in2code.deWir leben TYPO3
Sassify für TYPO3
• Extension für TYPO3 um SASS/SCSS direkt in TYPO3 zu nutzen
• Extension installieren, statisches TS inkludieren, Plugin per TS
konfigurieren
in2code.deWir leben TYPO3
Sassify für TYPO3
Beispielkonfiguration
(inkl. Debugging und Conditional Comments für den geliebten IE):
Quelltext:
in2code.deWir leben TYPO3
Links und Quellen
Links
Homepage von SASS: http://sass-lang.com
Wikipedia: http://de.wikipedia.org/wiki/Sass_%28Stylesheet-Sprache%29
Quellen
• t3n-Artikel „CSS leicht gemacht“ – Ausgabe 24
• Session „ Strukturiertes CSS mit SASS und sassify“ von Berit Jensen beim
t3chh11
in2code.deWir leben TYPO3in2code.
Vielen Dankund Happy Styling
wünscht Martin Huber!
www.in2code.deStefan BusemannTina GasteigerAlex Kellner