Everything from:sass

Mit verschiedenen Maßeinheiten in CSS rechnen: Die calc() Funktion


Will man in seinem Stylesheet Berechnungen anstellen denkt man heutzutage sofort an SASS oder „zumindest“ LESS. Schließlich kann man hier komplexe Formeln hinterlegen und mit Variablen arbeiten und so ein komplettes Layout mit wenigen Anpassungen neu „ausrechnen“. Aber SASS und LESS sind eben Präprozessoren. Sie stellen die Berechnung an lange bevor das Stylesheet im Browser des Users geladen wird. Was 100% Breite in Pixeln bedeutet, oder 100px in Prozent weiß zu diesem Zeitpunkt niemand. Schließlich hängt das ja von dem individuellen Endgerät ab. Relative und absolute Werte können so also nicht zusammen berechnet werden. So etwas wie: .a{ height: (100% + 100px); } kann z.B. in SASS nicht funktionieren. Schließlich sind 100% + 100px auf einem Smartphone etwas komplett anderes […]

Weiterlesen…

SASS für Einsteiger – Teil1: Hintergründe & Installation


Jeder der gerne und viel mit CSS arbeitet kommt früher oder später an gewisse Grenzen. Insbesondere wenn man mit mehreren Personen zusammen an größeren Projekten arbeitet. Aber auch bei kleinen Projekten gibt es immer wieder diese Momente in denen man denkt: „Das könnte auch einfacher und logischer sein“. Und: „Warum muss ich dass alles immer wieder und wieder eingeben?“ Hier kommt SASS ins Spiel. SASS steht für „Syntactically Awesome StyleSheets“ und ist ein sogenannter CSS Präprozessor. Präprozessor weil aus einer SASS Datei eine CSS Datei erzeugt wird, BEVOR diese auf dem eigentlichen Server zum Einsatz kommt. Es geht also nicht darum irgendetwas auf Server- oder Clientseite zu verbessern oder zu optimieren. Es geht darum schneller, einfacher, effektiver und besser CSS […]

Weiterlesen…

Gulp Basics: Ein Einsteiger Tutorial


Gulp.js ist ein sogenannter „Task Runner“, oder auch, wie sich Gulp selber nennt, ein „streaming build system“. Kurz gesagt: Es übernimmt nervige, immer wiederkehrende Aufgaben in der Frontend Entwicklung, automatisiert und erweitert diese. Typische Tasks können beispielsweise die Optimierung von Bildern fürs Web, minifizieren von JavaScript Dateien oder das Kompilieren von SASS Dateien in CSS sein. All dies kann, wenn ein entsprechender Gulp Task angelegt wurde, mit einem kurzen Befehl auf der Kommandozeile erledigt werden. Bei Bedarf können auch beliebige Tasks kombiniert werden, so dass ein einziger Befehl reicht eine Webseite „ausgeh-fein“ zu machen und auf den Server zu schieben. Was wird benötigt um Gulp zu nutzen? Um Gulp nutzen zu können muss selbstverständlich Gulp installiert sein. Dazu braucht man […]

Weiterlesen…

_s Starter Theme + Bootstrap SASS = UnderStrap


Bei der Entwicklung eines WordPress Themes fallen zum großen Teil Arbeiten wieder und wieder an. Arbeiten die man bereits bei der Entwicklung frührer Themes erledigt hat. Bugs die bereits behoben wurden, Features die sich bereits als sinnvoll erwiesen haben, Funktionen die man lieb gewonnen hat usw. usw. Was liegt also nähere als eines der vielen Theme Frameworks zu nutzen? Genau, ein eigenes Theme Framework zu entwickeln: UnderStrap Theme Framework WordPress _s theme + Bootstrap SASS Download & mehr Info´s gibt es hier: UnderStrap.com besuchen Key Features: Basiert auf dem _underscores (oder auch _s) Starter Theme von Automattic Implementiert Bootstrap 3 Bootstrap 4 Verwendet das Owl Carousel 2 (beta) script Font Awesome Icon Font ist integriert Eigener JS Code läßt sich […]

Weiterlesen…