dooz

Unglaublich! Jetzt gibt es eine GUI für das bekannte LESS, welches nicht nur CSS „erweitert“, sondern auch “kompiliert”. Mit LESS kannst du dein CSS schöner gestalten und mehr Magie und Ordnung reinbringen.

Variablen:

Wie oft hat man das: h1 und p bekommen die gleiche Farbe, ergo: Man muss zweimal color: #444; für beide Tags angeben, egal ob vererbt oder nicht, aber mit LESS sieht das Ganze so aus:

@brand_color: #444;
h1 {
color: @brand_color;
font-size: 1.5em
}
h2 {
color: @brand_color;
font-size: 1.2em
}
p {
color: @brand_color;
font-size: 1em;
}

Mixins (Funktionen)

Man kann auch Funktionen, sogenannte Mixins, benutzen, die auch mit Variablen arbeiten. Du kannst also eine Klasse oder ID mit einem Standardwert erstellen und diese dann weiteren Klassen oder IDs zur Verfügung stellen.

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}

Verschaltelte Regeln

Vererbung gibt es bei LESS auch. Es spart Tipperei und ist logischer aufgebaut.

#header {
color: red;

a {
font-weight: bold;
text-decoration: none;
}

}

Operationen

CSS und mathematische Operationen waren immer zwei verschiedene Paar Schuhe. Mit LESS kannst du rechnen!

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}

Mehr dazu gibt es in der englischen Dokumentation.

Installation

Also wenn du einen Mac hast, brauchst du nur ein Terminal aufrufen und

sudo gem install less

eintippen. Damit installierst du dir den lessc, der eigentliche Compiler.

Mit der GUI LESS.app kannst du dann komfortabel die Dateien kompilieren. Einfach das Verzeichnis per Drag&Drop in das Fenster reinziehen und schon kann es losgehen.