Beiträge tagged mit sass

Alle Beiträge

CodeKit

CodeKit ist ein Sammlung von Tools und Funktionen für Frontendentwickler, die den täglichen Workflow im Umgang mit JavaScript und CSS extrem vereinfachen.

“It’s like steroids for web developers" preist der Entwickler von CodeKit sein Programm an und nimmt den Mund damit keineswegs zu voll. 

CodeKit

Die Bedienung ist kinderleicht. Einfach einen Projektordner in das Tool ziehen. Den Rest übernimmt CodeKit und entfaltet dann seine wahre Magie.

Prinzipiell ist CodeKit ein Preprocessor für Sass, Less, Stylus und weitere CSS-Varianten. Metasprachen wie Jade, Halm,  Coffescript etc. werden ebenfalls unterstützt.

Auch für Javascript bietet CodeKit sinnvolle Ergänzungen. So können Skripte mittels JSLint und JSHint überpüft werden und mittels UglifyJS komprimiert werden.

Weitere Features sind unter anderem das automatische komprimerieren von JPEG und PNG Bildern, sowie eine auto-reload Funktionalität.

Autoreload lädt bei Änderungen in Javascript bzw. CSS-Dateien diese automatisch im Browser nach. Das spart Zeit und Nerven.

Der Funktionsumfang ist etwas größer, als bei dem ähnlichen Tool Livereload. Die Bedienung und Optik von CodeKit gefällt aber um einiges besser.

Hier kann eine Trial Version heruntergeladen werden. Eine Lizenz kostet $25.

Fazit: eigentlich ein Muß für jeden Webentwickler. Schon nach kurzer Zeit möchte man die Funktionen von CodeKit nicht mehr missen und fragt sich, wie man bisher überhaupt ohne Leben konnte ;-)

Syntactically Awesome Stylesheets

Für alle, die sich schon immer über die unflexible Natur von CSS-Dateien geärgert haben, gibt es gute Nachrichten. Sass bringt hier Abhilfe. Mittels eines Ruby Scripts können CSS-Dateien “Manieren” beigebracht werden. So können Nested Rules, Variablen, Mixins, Selektor-Vererbung und weitere Schmankerl für CSS verwendet werden.

Gerade bei größeren CSS Dateien, die bis zu ihrer Vollkommenheit häufige Änderungen und Updates erfahren, ist dieses kleine Helferlein eine echte  Bereicherung.

Das Javascript-Framework Sencha Touch arbeitet prima mit Sass zusammen. Auf dem Sencha-Blog gibt es einen schönen Beitrag “Getting Sassy with CSS” in dem die ersten Schritte für die Benutzung für Sass erläutert werden.

Viel Spaß beim Ausprobieren.