Wordcamp ber-2015-scss

653 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
653
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Wordcamp ber-2015-scss

  1. 1. WordCamp Berlin 2015 SCSS Zaubertricks Argumente für die Nutzung von SCSS
  2. 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. 3. STYLES Die Abkürzungen: CSS =  Cascading Style Sheets   SASS =  Syntactically Awesome Style Sheets   SCSS =  Sassy Cascading Style Sheets 
  4. 4. STYLES SASS  Schreibweise  Einrückung statt { }  SCSS  Schreibweise  In Anlehnung an CSS-Syntax mit { } und ; Variablen-Deklaration: $name: wert;
  5. 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. 6. SCSS Variablen Beispiel 1 Von h4 bis h1 jeweils um den Faktor 1.3 erhöhte Schriftgröße
  7. 7. SCSS Variablen Beispiel 2
  8. 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. 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. 10. SCSS-Farbwelt im Selbstbau
  11. 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. 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. 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. 14. WP SCSS (WordPress Plugin) Bindet das generierte CSS ein. Pfade (innerhalb des Themeordners) eintragen
  15. 15. WP SCSS SCSS und erzeugte CSS-Datei Mit diesem Eintrag in der wp-config.php kompiliert das Plugin WP-SCSS „selbsttätig“
  16. 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. 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. 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. 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

×