WordCamp Berlin 2015

SCSS Zaubertricks

Argumente für die Nutzung von SCSS

Zutaten einer WebsiteDie magischen „S“

STRUCTURE(HTML - serverseitig von PHP erzeugt)

SCRIPTS(JavaScript, jQuery)

STYLES(Definition der Optik via CSS)

Sinn, Sicherheit, Sexapeal, Speed, SEO, $, ...

STYLESDie Abkürzungen:

CSS = Cascading Style Sheets

SASS = Syntactically Awesome Style Sheets

SCSS = Sassy Cascading Style Sheets

STYLESSASS Schreibweise Einrückung statt { }

SCSS Schreibweise In Anlehnung an

CSS-Syntaxmit { } und ;

Variablen-Deklaration:$name: wert;

SCSSVorteile Nachteile

Präprozessor erforderlich Evt. mehr Debugging-Aufwand

Wesentlich pflegeleichter als CSS pur Unproblematischer als „Suchen &

Ersetzen“ Funktionale Erweiterungen gegenüber

CSS Variablen Nesting Import (Übersicht / Struktur) Mixins

SCSSVariablen Beispiel 1

Von h4 bis h1 jeweils um den Faktor 1.3 erhöhte Schriftgröße

SCSSVariablenBeispiel 2

CSS-Farbwerte Exkurs:

Farben in CSS

HEX #005b8f RGB rgb(0,91,143)

rgb(0%,36%,56%) HSL hsl(202,100%,28%)

Generatoren für Farbwelten

z.B. http://paletton.com

CSS-Farbwelt // Feel free to copy&paste color codes

to your application */ // As hex codes */ $color-primary-0: #FB4949; // Main

Primary color */ $color-primary-1: #FF8888; $color-primary-2: #FF6767; $color-primary-3: #F22929; $color-primary-4: #DB0A0A; $color-secondary-1-0: #3773A1; //

Main Secondary color (1) */ $color-secondary-1-1: #6D9EC2; $color-secondary-1-2: #4D85AF; $color-secondary-1-3: #23679C; $color-secondary-1-4: #0F568D;

optional Export als SASS

SCSS-Farbweltim Selbstbau

SCSS-Farbwelt

Farbwert um jeweils 70° gedrehtFarbwerte = 210, 140, 70, 0 <div>-Element 50% heller<li>-Element 45% heller<li class=“active“ 30% heller

SCSS-FarbweltFarbwert um jeweils 45° gedrehtFarbwerte = 210, 165, 120, 75(nur 1 SCSS-Variable geändert)<div>-Element 50% heller<li>-Element 45% heller<li class=“active“ 30% heller

SCSSTools

Was wir brauchen

PräprozessorenProgramme: z.B. Koala, Compass

oder via Ruby-Shell

Browser-Tools Erweiterungen: Firebug, FireCompass

WordPress-Plugin: WP-SCSS

als schneller Weg zum Ergebnis

WP SCSS (WordPress Plugin)

Bindet das generierte CSS ein.

Pfade (innerhalb des Themeordners) eintragen

WP SCSS

SCSS und erzeugte CSS-Datei

Mit diesem Eintrag in der wp-config.phpkompiliert das Plugin WP-SCSS „selbsttätig“

SASS (shell)

Sass wartet in der Shell auf Änderungen der SCSS-Datei und erzeugt eine neu kompilierte CSS-Datei

mit integrierten Kommentarzeilen für ein leichteres Debugging.

(mit den Parametern -l bzw --line-numbers und --watch gestartet)

Läuft auf dem Server (Root-Server, localhost / Linux, Windows, Mac – nicht auf shared hosting)Installationsanleitung: http://sass-lang.com/install (Command Line)

Browser / Debug (Firebug)

CSS-Datei: Ausgabe vom SASS-Präprozessor

Das Plugin WP-SCCS generiert diese Kommentarzeilen leider nicht.

Mit dem Browser-Add-on Firebug und FireCompass für Firebug

finden sich schnell die Zeilen-Nr der originalen SCSS-Datei.

Onlinehttp://sass-lang.com/Links auch zu den Präprozessoren (Koala, Compass, Scout …) und Command-Line-Tools, Dokumentation

https://wordpress.org/plugins/wp-scss/

https://wordpress.tv/2015/10/09/bernhard-kau-beginners-guide-sass/ (EN)

https://wordpress.tv/2015/06/25/bernhard-kau-einfuehrung-in-sass/ (DE)

FAQ Wie lautet die

Zauberformel für Erfolg aus 3 Buchstaben?

T U N Möge dieser Lightning-Talk

zu SASS / SCSS Experimenten anregen!

Friedhelm Oja, WordCamp Berlin 2015