eCommerce Entwickler Blog

Der Entwickler Blog enthält verschiede Lösungsansätze für Fehler und Bug aus dem eCommerce Umfeld. Hier berichten Entwickler über ihre Erfahrungen und teilen ihre Lösungswege.

Einstieg in LESS

Was ist Less?

Less ist ein CSS Framework mit dem Ziel, CSS Code übersichtlicher und effizienter nutzen zu können. Es wird lediglich ein LESS Compiler für die jeweils genutzte IDE benötigt. LESS ist keine neue Sprache, die man erst erlernen muss, sondern es ist ein CSS Framework. Es erlaubt, die Verschachtelungen des CSS-Codes zu verbessern, nutzt Variablen und sogenannte Mixins. LESS ist zudem in der Lage Berechnungen durchzuführen. Nachfolgend finden Sie einige Beipiele hierzu:


Variablen

In Less einfach zu definieren:

@main_blue: #0000FF;
#header {
    color: @main_blue;
}

Wird kompiliert zu:

#header {
    color:  #0000FF;
}


Mixins

Mit Mixins definiert man bestimmte Attribute für eine CSS-Klasse. Und diese kann anderen Klassen dann übergeben werden:

.round_div {
    border-radius: 15px;
}

.menu li {
    .round_div;
}

Somit bekommen die Listenelemente in der Klasse menu den in der Klasse round_div festgelegten border-radius:15px;


Verschachtelungen

Eine der genialsten Funktionalitäten von Less ist die Verschachtelung der Selektoren, die die Arbeit mit Less und somit auch CSS vereinfachen. In CSS nutzen wir für verschiedene a, p oder div Tags jeweils wieder neue Selektoren und müssen den Anfang der Selektoren im CSS Code somit oft wiederholen:

Html body #page-wrapper #header { width: 800px; }
Html body #page-wrapper #header li { padding: 5px;}
Html body #page-wrapper #header li a { color: #00000000; }

In Less ist dieses sehr viel übersichtlicher und somit ist es auch viel einfacher zu unterscheiden, wo man sich gerade in seinem CSS-Konstrukt befindet. Wir schaffen uns eine sehr klare Struktur, die das Arbeiten deutlich erleichtert:

html {
    body {
        #page-wrapper {
            #header {
                width: 800px;
                li {
                    padding: 5px;
                    a{
                        color: #00000000;
                        &:hover {
                            color: #ff9a00;
                        }
                    }
                }
            }
        }
    }
}

Berechnungen

Mit Less können Berechnungen durchgeführt werden, die dann in Variablen gespeichert werden.

@main_width: 100px;
Header {
    width: (@main_width * 3) ;
}

Somit wird die Weite für den Header auf 3 * 100px = 300px gesetzt.

Diese Funktion lässt sich auch nach dem gleichen Schema auf beispielsweise Farben adaptieren:

#main a {
color:      (#222*3);
}

Das Ergebnis hier wäre eine Veränderung des Farbcodes #222222 zu #666666.

Bei Farbcodes mit Buchstaben funktioniert es ebenfalls. Dabei muss man wissen, dass die Buchstaben nur als Platzhalter für hexadezimale Werte stehen. Das kleine a entspricht zum Beispiel dem Wert 10 :

#main a {
color:	(#04ad22*3);
}

Die Umrechnung wäre wie folgt:
0*3=0
4*3=12, wobei 12 dem kleinen c entspricht.
a*3=f, wobei a dem Wert 10 entspricht. 3*10 überschreitet den maximalen Wert von 15 und wird deshalb dem kleinen f zugeordnet als höchst möglichem Platzhalter.
d*3=f, genauso wie bei a*3
22*3=66

Das Ergebnis ist entsprechend 0cff66


LESS – unser täglicher Helfer

Unsere Erfahrung mit dem Umgang mit LESS zeigt, dass es CSS-lastige Projekte sehr viel einfacher und angenehmer macht, da man sich mittels der Verschachtelung schnell einen guten Überblick über die Struktur machen kann. Die Nutzung von Variablen, gerade bei Schriftfarben, ist effizienter, denn die Schriftfarbe muss nur noch an einer Stelle, der Variablendeklaration, geändert werden. Wir setzen auf LESS bei Projekten, bei denen wir bei „Null“ starten, sowie bei größeren Projekten, um vorhandenen Code übersichtlicher zu gestalten.

Für Dreamweaver gibt es den Compiler hier: "http://www.dmxzone.com/go/21528/dmxzone-less-css-compiler/

phpStorms LESS Compiler ist hier zu finden: https://plugins.jetbrains.com/plugin/7059?pr=idea

Sublimes LESS Compiler Plugin: https://github.com/timdouglas/sublime-less2css


Credits:

Haben Sie Fragen, Wünsche oder Anregungen?
Dann können Sie uns über unser Kontaktformular kontaktieren.

Jetzt das Kontaktformular öffnen!

oder Sie erreichen uns unter der Telefonnummer: (04101) 85 86 80