Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Wordcamp ber-2015-scss

790 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

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

×