Mit SCSS Zaubertricks eine Farbwelt generieren. Appetit-Anreger für den Einsatz von SCSS.

1. WordCamp Berlin 2015
SCSS Zaubertricks
Argumente für die Nutzung von SCSS

2. Zutaten einer Website
Die magischen „S“
STRUCTURE
(HTML - serverseitig von PHP
erzeugt)
SCRIPTS
(JavaScript, jQuery)
STYLES
(Definition der Optik via CSS)
Sinn, Sicherheit,
Sexapeal, Speed,
SEO, $, ...

3. STYLES
Die Abkürzungen:
CSS =

Cascading Style Sheets


SASS =

Syntactically Awesome Style Sheets


SCSS =

Sassy Cascading Style Sheets


4. STYLES
SASS

Schreibweise

Einrückung statt { }

SCSS

Schreibweise

In Anlehnung an
CSS-Syntax
mit { } und ;
Variablen-Deklaration:
$name: wert;

5. SCSS
Vorteile 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

6. SCSS
Variablen
Beispiel 1
Von h4 bis h1 jeweils
um den Faktor 1.3
erhöhte Schriftgröße

7. SCSS
Variablen
Beispiel 2

8. 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

9. 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

10. SCSS-Farbwelt
im Selbstbau

11. SCSS-Farbwelt
Farbwert um jeweils 70° gedreht
Farbwerte = 210, 140, 70, 0
<div>-Element 50% heller
<li>-Element 45% heller
<li class=“active“ 30% heller

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

13. SCSS
Tools
Was wir
brauchen
Präprozessoren
Programme:
z.B. Koala, Compass

oder via Ruby-Shell

Browser-Tools

Erweiterungen:

Firebug, FireCompass

WordPress-Plugin:

WP-SCSS
als schneller Weg
zum Ergebnis


14. WP SCSS (WordPress Plugin)
Bindet das generierte CSS ein.
Pfade (innerhalb des
Themeordners) eintragen

15. WP SCSS
SCSS und erzeugte CSS-Datei
Mit diesem Eintrag in der wp-config.php
kompiliert das Plugin WP-SCSS „selbsttätig“

16. 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)

17. 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.

18. Online
http://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)


19. 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