wordcamp ber-2015-scss
Post on 07-Apr-2017
728 Views
Preview:
TRANSCRIPT
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
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-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)
top related