[vc_row][vc_column][vc_single_image image=“2338″ img_size=“full“][vc_column_text]
Schon seit fast einem Jahr arbeiten wir nun mit sog. CSS-Preprocessors. Diese ermöglichen uns in einer viel effizienteren Art und Weise zu arbeiten als mit plain CSS. Ein kurzes Beispiel hierzu: Für eine Website wird eine Farbe, in der Regel die Hausfarbe des Unternehmens festgelegt. Daraus resultiert dann die Farbe alles Hyperlinks. Die Farbe der besuchten, aktiven und hover links (die Farbe wenn man mit der Maus darüber geht), diese Farben sind dann entweder 10% heller oder dunkler, mehr gesättigt etc. Bei grösseren Projekten kann es mitunter in ziemlich viel Arbeit ausarten wenn man sich dann doch für eine andere Farbe entscheidet. Hier muss mit Search&Replace durch die Dateien gehen und alle Werte ersetzen.
Hier kommt die Power der Preprocessors „Less“ ins Spiel mit welchem ich Arbeite. Es gibt auch „SCSS“ oder „SASS“, da muss jeder selbst entscheiden was ihm am meisten zusagt.
Durch Variablen vereinfachen wir unseren Workflow extrem.
Wir legen die Hausfarbe durch folgende Variable fest:
@kunden-gruen: #339933;
Wenn wir jetzt unserer h1 Überschrift dieses Grün zuweisen wollen schreiben wir
h1 { color: @kunden-gruen; }
Angenommen unsere Link Farbe soll in einem etwas helleren Grün sein.
a { color: lighten(@kunden-gruen, 10%); }
Oder noch besser wir legen genau diesen Wert als Variable an.
@link-color: lighten(@kunden-gruen, 10%);
So reicht es dann wenn wir nur den Hexa-Decimal Wert der Farbe in der Variable „@kunden-gruen“ ändern, schon erscheint unsere Website in den neuen Farbabstufungen.
„Less“ bietet noch viel mehr um die Arbeit mit CSS zu einem reinen Vergnügen zu machen. Dieses kleine Beispiel kratzt nur an den Möglichkeiten die „Less“ bietet.
„LESS erweitert CSS mit dynamischem Verhalten wie Variablen, Mixins, Berechnungen und Funktionen. LESS läuft auf sowohl Server-seitig, mit Node.js und Rhino als auch Client-seitig (nur mit modernen Browsern)“
Da der Less-Code erst zu CSS-Code kompiliert werden muss, arbeitet man am besten mit einer lokalen Instanz und lädt dann nur die entsprechende style.css auf den Server.
Gute compiler für windows sind:
Ein simpler Compiler wie der Name schon sagt. Auf Wunsch verkleinert er die Ausgabe-Datei (entfernt Leerzeichen und Absätze.Hinzu kommt der Web-Service Prefixr, damit lassen sich Browser spezifische CSS-Befehle automatisch Browser konform umwandeln.
Herausgegeben von Ethan Lai, derzeit noch Beta. Der große Vorteil dieser Software ist die Verfügbarkeit auf nahezu jedem Betriebssystem.
Derzeit meine erste Wahl. Durch die eingebaute Live-Reload Funktion und die vielen Einstellungsmöglichkeiten auf jeden Fall eine Installation Wert.
Sicher gibt es noch viel mehr Programme die sich hervorragend dafür eignen, diese Auswahl beruht lediglich auf meinen Persönlichen Erfahrungen.
[/vc_column_text][/vc_column][/vc_row]