Jun 29

LESS.js – CSS mit Variablen und Funktionen

Tag: jQuery — Patrick @ 6:15 pm

LESS ist eine Erweiterung der bestehenden CSS-Definitionen und beinhaltete alle existierenden Formatierungen. Im Unterschied zu CSS beherrscht LESS jedoch den Umgang mit Variablen, erweiterten Klassen, Funktionen und eingebetteten Regeln. Und das ist echt cool.

Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

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

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

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

4 Antworten zu “LESS.js – CSS mit Variablen und Funktionen”

  1. revierphone-micha sagt:
    September 4th, 2010 at 9:21 am

    Sieht sehr interessant aus und wird vielen Entwicklern einiges an Arbeit ersparen.

  2. Sina sagt:
    Dezember 15th, 2010 at 9:13 am

    Hallo, ich habe less schon eingebaut und es funktioniert einwandfrei (mit less.js). In einigen Projekte zerschießt das Layout sobald ich ein Variable verwende (Bsp: background:@headerColor; )
    Kann es an Prototype.js liegen?!

    Grüße,
    Sina

  3. Benny sagt:
    Februar 10th, 2012 at 7:41 pm

    @Sina ja, das kann theoretisch sein. Habe mit Prototyp generell eher schlechte Erfahrungen gemacht. Probiere es doch mal mit jQuery. Oder spricht etwas dagegen?

    Für alle, die mit Ruby arbeiten und gerne ein „gepimptes“ CSS serverseitig möchten, kann ich außerdem noch Sass (http://sass-lang.com/) empfehlen 🙂

  4. digital instinct sagt:
    Januar 12th, 2016 at 10:44 pm

    Danke für den tollen Blog-Eintrag. Habe deine Adresse an meinen Entwickler weitergeleitet, der schaut jetzt regelmässig hier rein.

  5. levitra online sagt:
    April 15th, 2020 at 5:01 am

    levitra generic

    levitra 20mg tablets new posts – levitra information levitra ascending order – levitra soft tabs cheap

  6. cbd sagt:
    April 21st, 2020 at 6:45 am

    cbd

    best cbd cream – cbd in food – cbd vape pen

  7. buy chloroquine phosphate sagt:
    April 25th, 2020 at 10:02 pm

    buy chloroquine phosphate 250mg

    coronavirus in washington – chloroquine sars – 2 coronavirus in california

  8. generic cialis sagt:
    April 28th, 2020 at 4:26 pm

    cialis online

    cialis 10mg or 20mg interests – cialis vs viagra blogs sign.asp?pageposition= – cialis 10mg users browsing this forum

  9. viagra 100mg sagt:
    April 28th, 2020 at 7:06 pm

    viagra pills

    viagra commercial – viagra cheapest – viagra buy log me on automatically each visit

  10. cbd sagt:
    April 28th, 2020 at 10:15 pm

    plus cbd oil

    cbd tincture 1000mg – cbd oil for pain dosage – cbd in pregnancy

  11. viagra for sale sagt:
    April 30th, 2020 at 11:06 pm

    viagra online

    soft viagra reliable – viagra dosage when to take forum contains new posts – order lilly viagra online

  12. generic cialis sagt:
    Mai 11th, 2020 at 4:26 am

    generic cialis

    cialis 5 mg coupon forum software – impotance – ed clinics

  13. tadalafil sagt:
    Mai 21st, 2020 at 11:11 pm

    buy tadalafil online

    cialis 20mg canada last post – cialis 5mg works password – india generic cialis

  14. cialis professional wikipedia sagt:
    Januar 25th, 2024 at 7:09 pm

    cialis professional wikipedia

    cialis professional wikipedia

Hinterlasse einen Kommentar

You must be logged in to post a comment.