+ All Categories
Home > Internet > Wordcamp ber-2015-scss

Wordcamp ber-2015-scss

Date post: 07-Apr-2017
Category:
Upload: fo
View: 728 times
Download: 0 times
Share this document with a friend
19
WordCamp Berlin 2015 SCSS Zaubertricks Argumente für die Nutzung von SCSS
Transcript

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


Recommended