Sass, Less, Less, Sass? Oder doch Stylus?

Sass, Less, Less, Sass? Oder doch Stylus?

Ok, Stop. Worum geht’s hier eigentlich? Less? More? Less is more?
Jein.
Die Präprozessoren namens SASS („Syntetically Awesome Stylesheets“) und LESS (wie „less“) haben sich als die beliebtesten erwiesen, um die Programmiersprache CSS schlank zu halten und unnötige Schreibarbeit zu eliminieren. Das tun sie mit Variablen, Funktionen und Mixins (*mehrfach verwendbares Bündel an Funktionalitäten), um CSS zu einer (noch) einfacheren, runden Sprache zu machen und den Code zu verkürzen. Also schafft man quasi mit weniger genauso viel, wenn nicht sogar mehr. Das Gleiche tut auch der Präprozessor „Stylus“, welcher weniger bekannt ist. Die, die ihn kennen, insistieren darauf, dass Stylus die beste der drei Varianten darstellt.
So herrschen viele Debatten darüber, was denn nun der „beste“ Präprozessor sei. Die Entscheidung macht sich meist in den kleinen Details fest, die die Präprozessoren in ihren Feinheiten voneinander unterscheiden. So mancher Entwickler befindet sich gerade zu Beginn in dem Dilemma: Wenn doch die Strukturen der Präprozessoren so ähnlich sind, gestaltet sich die Auswahl schwierig. Und macht es überhaupt so einen Unterschied?
Nun, das muss jeder für sich selbst entscheiden, wie viel wert er den verschiedenen Feinheiten in den Unterschieden gibt. Wir wollen dir mit diesem Beitrag helfen, einen Überblick darzulegen.

Warum sind Präprozessoren überhaupt sinnvoll?
Wie schon erwähnt, dienen die Präprozessoren der Vereinfachung des Code Handlings und der Verkürzung des Codes. Die Style-Sprache CSS, die mit HTML Hand in Hand geht, macht im Prinzip folgendes: CSS beschreibt jedes einzelne Element mit Attributen, damit der Prozessor über diese Eigenschaftsbeschreibung drüber liest und letztendlich die Gesamtheit der Elemente in eine Form bringt, Farben, Größen, Breiten und Längen an die richtige Stelle setzt und uns letztendlich das Endprodukt auf dem Bildschirm sehen lässt. Das Zeitaufwendige bzw. etwas Umständliche an der doch so einfachen Programmiersprache ist hierbei die Regel, dass man für jeden einzelnen Abschnitt die Eigenschaften wiederholen muss. Dieser Umstand läuft eigentlich den Prinzipien anderer Programmiersprachen entgegen, da man sich eigentlich so wenig wie möglich wiederholen sollte, um den Code so simpel und effizient wie möglich zu schreiben. Das ist das sogenannte DRY* Prinzip, an das sich jeder Entwickler halten sollte. *Don’t Repeat Yourself – die Marketing Regel (Keep it simple and short) im Informatiker Milieu.
Die Präprozessoren wie SASS, LESS oder auch Stylus erleichtern das Spiel nun durch ihre Variablen, Funktionen und Mixins, indem sie bereits einmal definierte Eigenschaften und Muster immer wieder verwenden können. Ähnlich wie wenn man seine Mitbewohner, Kinder, Partner oder Kollegen nur einmal darum bitten würde, die Spülmaschine auszuräumen – und sie würden es immer wieder machen, ohne, dass du dich wiederholen müsstest. Verständlich, dass diese Präprozessoren so beliebt sind, oder?
Und um wieder in den Bereich der Informatik zurückzukehren: Kleine Abänderungen am Code sind so viel einfacher zu handhaben.

Gibt es einen Gewinner?
Unsere Antwort: Reine Ansichtssache.
Im Netz gibt es zahlreiche Diskussionen, darunter wirklich gute Argumente für die jeweiligen Präprozessoren. LESS siegt in der Nutzerfreundlichkeit und Accessibility, SASS setzt sich als eindeutiger Sieger in der Logik und Einfachheit der Berechnungen durch. Stylus nimmt all diese Faktoren mit LESS und SASS auf und überzeugt zudem durch den einfachen Aufbau mit Node.js und der JavaScript Vereinbarkeit, wohingegen die Vorteile von SASS mit der Komplexität von Ruby den ein oder anderen abschrecken. Das Besondere an Stylus ist darüber hinaus die Flexibilität, mit der man den Code schreiben kann. Die typischen CSS Klammern, die du bei LESS zwangsläufig ebenfalls setzen musst, bei SASS hingegen weglassen kannst, kannst du bei Stylus beliebig mischen und das in ein und demselben Dokument. Manche finden gerade diesen Aspekt genial, andere erachten es als unnötiges Feature. Viele greifen z.B. deshalb auf LESS zurück, da der Zweck der Code-Vereinfachung erfüllt wird und das Handling simpel umsetzbar ist. Wir sind der Meinung, dass alle ihre Vorteile haben. Solange du damit gut und einfach coden kannst, ist die Wahl am sinnvollsten, mit der du am besten zurechtkommst.

Unsere Website Empfehlungen, auf denen du dich schlau machen kannst

Wir können persönlich empfehlen erst einmal den direkten Vergleich in den Codes zwischen SASS und Less einzusehen.

Diese Seite gibt dir eine umfassende Erklärung sowie Code Beispiele warum genau SASS oder LESS verschiedene Aspekte besser umsetzen kann. Diese Auseinandersetzung beschäftigt sich mit Aspekten wie User-Freundlichkeit, Mathematik, Media Queries, Language Ability und vielem mehr. Reinzuschauen lohnt sich. Natürlich findest du ein Plädoyer für alles, wenn du nur danach suchst, denn Interessen und Sympathien fallen nun mal eher subjektiv aus. Doch der ein oder andere kann sich inspirieren lassen und sich auch mit den Gründen für die eine oder andere Wahl auseinandersetzen, um für sich die individuelle zu treffen.

Hier findet ihr eine Auseinandersetzung aller drei Präprozessoren und einem Plädoyer für Stylus. Auch hier erachten wir die Abwägung jeder Vor- und Nachteile der drei Varianten für hilfreich und gut durchdacht.

Frontend Frameworks – Teil 3

Frontend Frameworks – Teil 3

Im dritten Teil unserer Frontend Framework Reihe kommen wir zu den etwas anspruchsvolleren Frameworks, die eher für Leute mit Berufserfahrung als Developer angemessen sind.

Da hätten wir zum einen Foundation, welches von Großunternehmen wie eBay, Facebook oder Mozilla benutzt wird. Dieses Framework unterstützt GPU Beschleunigungen, was gleichmäßige und blitzschnelle Animationen ermöglicht. Ebenso hat es keine Lock-In bei Styles, sodass man flexibler arbeiten kann. Zudem benutzt es REMS statt Pixel. Das hat den Nutzen, dass man sich nicht an bestimmte Höhen oder Breiten bei jedem Endgerät richten muss.

Foundation gilt als Framework für Entwickler mit einem gewissen Erfahrungspensum, die vor Allem schnelle, reaktionsfähige Webseiten programmieren.

 

Sucht ihr nach einem Framework, mit dem ihr simpel Google’s Material Design Richtlinien befolgt, dann macht ihr mit Material UI nichts falsch, denn es ist das am besten ausgearbeitete Framework, um die Richtlinien umzusetzen. Aber: es ist kein geeigneter Ansatzpunkt, um ein neues Webdesign Projekt aufzusetzen.

Mit gebrauchsfertigen CSS- und Materialdesign-kompatiblen Klassen beladen, wird Material UI auf dem LESS Preprocessor aufgebaut. Weil es React-Komponenten verwendet, ist ein gewisses Verständnis von React hilfreich.

Absolut bezeichnend für dieses Framework ist, dass es individuell anpassbare Stile enthält, die in einzelne Dateien getrennt sind. So können Sie LESS CSS-Variablen überschreiben, ohne Framework-Komponenten zu beeinflussen.

Insgesamt ist es daher für Entwickler geeignet, die Erfahrung mit React.js haben und einen einfachen Weg einschlagen wollen, um die Material Design Richtlinien umzusetzen.

 

Entwickelt von Yahoo Developern ist Pure ein Framework, mit dem man so gut wie jedes Projekt angehen kann. Mit einem Array an CSS Modulen kann man mit Pure reaktionsfähige Buttons, Menüs, Grids, Tabellen und anderen interessanten Features kreieren. Dennoch ist hierbei zu beachten, dass momentan noch keine jQuery oder JavaScript PlugIns dafür vorhanden sind, da das Framework Pure ausschließlich .css Dateien umfasst.

Wenn es mit Gzip minimiert und komprimiert wird, verkleinert sich die Dateigröße bereits auf 4,75 kB, was es zu einem der schnellsten, platzsparendsten und geschicktesten Frameworks macht. Das ist der Grund, weshalb gerade so viele Mobile Developer so begeistert von Pure sind.

Folglich ideal für Entwickler, die sich mit Responsive Development beschäftigen.

 

UIKit ist ein höchst modulares Framework, welches sich von anderen Frontend Frameworks hervorhebt. Einer der vielen Gründe hierbei ist wohl, dass es sich SASS CSS preprocessors und LESS gleichsam bedient.
Mit einer Anordnung von leichten, reaktionsfähigen Klassen mit den gleichbleibend, gleichnamigen conventions wurde UIKit zu einem der beliebtesten Frontend Frameworks.
Durch die 30 modularen und erweiterbaren Komponenten kann es kombiniert werden, um noch mehr Einsatzflexibilität zu bieten.

Es enthält Navigationskomponenten wie side navigation bars, Elemente wie HTML-Formulare und Tabellen, JavaScript-Komponenten wie Off-Canvas-Bars und modale Dialoge; verbreitete Elemente wie Buttons, Abzeichen, Overlays und Layoutkomponenten, einschließlich eines flüssigen, vollständig ansprechenden Grids.

Das Framework hat zwar unglaublich viel an Angebot zu bieten, ist jedoch durch seinen relativ neuen Status für Beginner nicht zwingend geeignet, da es dementsprechend wenige Entwickler gibt, die damit schon repräsentative Projekte oder Tutorials dazu angefertigt haben.
Daher stehen hier Möglichkeiten gegen die Schwierigkeit des Neuheitsgrades. Folglich ist es besser, wenn sich Entwickler mit einer ansehnlichen Erfahrung an Programmierung daran versuchen. Letzten Endes ist es ein sagenhaftes Framework für simple sowie für komplexe Projekte und eine echte Alternative mit viel Nutzungspotential.

 

Für Diejenigen unter uns, die besondere Layout Bedürfnisse haben, ist Susy ein geeignetes Tool. Der Begriff Tool fällt hier deshalb, weil viele Susy als Grid Maker klassifizieren. Dennoch rüstet dieses Layout Tool einen unabdingbar für individuelle, anspruchsvolle und kreative Layout Wünsche auf. Es übernimmt alle Kalkulationen für den Benutzer, sodass man viel an Zeit und Energie spart.

 

 

Alles in Einem sollte die Entscheidung, welches Framework man verwenden möchte, nicht auf ihrer Beliebtheit beruhen, sondern vielmehr darauf, was für den Bedarf der Entwicklung am besten passt.