Technopedia Center
PMB University Brochure
Faculty of Engineering and Computer Science
S1 Informatics S1 Information Systems S1 Information Technology S1 Computer Engineering S1 Electrical Engineering S1 Civil Engineering

faculty of Economics and Business
S1 Management S1 Accountancy

Faculty of Letters and Educational Sciences
S1 English literature S1 English language education S1 Mathematics education S1 Sports Education
teknopedia

teknopedia

teknopedia

teknopedia

teknopedia
  • Registerasi
  • Brosur UTI
  • Kip Scholarship Information
  • Performance
  1. Weltenzyklopädie
  2. Less (Stylesheet-Sprache) – Wikipedia
Less (Stylesheet-Sprache) – Wikipedia
aus Wikipedia, der freien Enzyklopädie
Less
Basisdaten
Erscheinungsjahr: 2009
Designer: Alexis Sellier
Entwickler: Alexis Sellier, Dmitry Fadeyev
Aktuelle Version 4.4.1[1] (25. August 2025)
Typisierung: Dynamisch
Beeinflusst von: CSS, Sass
Beeinflusste: Sass
Betriebssystem: plattformübergreifend
Lizenz: Apache-Lizenz, Version 2.0[2]
lesscss.org

Less (englisch für weniger) ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Hauptziele sind dabei, intelligente Steuerungen zu ermöglichen sowie Code-Wiederholungen zu vermeiden. Less ist eine Obermenge von CSS, das heißt, ein CSS-Code ist gleichzeitig auch gültiger Less-Code. Less wird zu CSS kompiliert.[3]

Geschichte

[Bearbeiten | Quelltext bearbeiten]

Die Sprache wurde von Alexis Sellier (auch bekannt als Cloudhead) entwickelt und im Jahr 2009 veröffentlicht. Anfangs wurde der Less-Compiler in Ruby entwickelt. Später entschied man sich dazu, auf JavaScript umzusteigen.[4]

Eigenschaften

[Bearbeiten | Quelltext bearbeiten]

Zusätzlich zu den normalen CSS-Anweisungen bietet Less die Schachtelung von Regeln, wodurch Code-Wiederholungen vermieden werden können. Beispielsweise können einer (bestehenden oder vom Programmierer festgelegten) Klasse von Elementen Regeln zugewiesen werden.

Des Weiteren bietet Less Variablen, die wie z. B. die Konstanten in Java zentral festgelegt werden und sodann an mehreren Stellen benutzt werden können. In Abhängigkeit von diesen Variablen können auch Berechnungen und Verzweigungen durchgeführt werden. Außerdem unterstützt Less Mixins: damit können Regeln unter einem Namen zusammengefasst und mit diesem an mehreren Stellen eingefügt werden, um so möglichst effektiv Code-Wiederholungen zu vermeiden.

Kompilierung

[Bearbeiten | Quelltext bearbeiten]

Da Less in JavaScript geschrieben ist, kann es nicht nur server-, sondern auch clientseitig (im Webbrowser) kompiliert werden. Ein Vorteil der clientseitigen Kompilierung für Entwickler ist, dass Änderungen am Quellcode mit Hilfe des Watch mode automatisch im Webbrowser aktualisiert werden.[5] Dies kann Zeit bei der Entwicklung sparen.

Codebeispiele

[Bearbeiten | Quelltext bearbeiten]

Variablen

[Bearbeiten | Quelltext bearbeiten]

Mit Variablen ist es möglich, oft verwendete Werte (z. B. Farben) an mehreren Stellen zu verwenden, sowie ihre Abwandlungen (z. B. heller/dunkler, blasser (erdiger), im Farbwinkel gedreht) intelligent zu nutzen.[6]

@meineFarbe: #143352;

#header {
  background-color: @meineFarbe;
}
h2 {
  color: @meineFarbe;
}

Wird das ganze nun kompiliert, erhält man folgendes Ergebnis:

#header {
  background-color: #143352;
}
h2 {
  color: #143352;
}

Mixins

[Bearbeiten | Quelltext bearbeiten]

In Mixins können mehrere Eigenschaften definiert werden, welche anschließend – ähnlich wie Variablen – Verwendung finden. Zudem können Parameter übergeben werden.[7] Auf diese Weise lässt sich leicht Code generieren, der mehrere Herstellerpräfixe verwendet, ohne diese jedes Mal extra angeben zu müssen.

Anmerkung: Das konkrete Beispiel mit -x-border-radius ist seit 2014 veraltet.[8] Die Varianten mit Präfix sind seitdem wirkungslos.

.rund (@radius: 4px) {
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .rund;
}
#footer {
  .rund(21px);
}

Dies wird kompiliert zu:

#header {
     -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
       -o-border-radius: 4px;
          border-radius: 4px;
}
#footer {
     -moz-border-radius: 21px;
  -webkit-border-radius: 21px;
       -o-border-radius: 21px;
          border-radius: 21px;
}

Verschachtelung

[Bearbeiten | Quelltext bearbeiten]

Hiermit besteht die Möglichkeit, Selektoren ineinander zu verschachteln. Das Verschachteln kann den Code kürzer und übersichtlicher machen, wodurch Fehler reduziert werden können.[9]

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Dies wird kompiliert zu:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Operationen und Funktionen

[Bearbeiten | Quelltext bearbeiten]

In Less können arithmetische Operatoren zur Berechnung von Werten verwendet werden.[10] Mit Funktionen können Werte auf komplexere Art und Weise modifiziert werden. Dies ist hilfreich um zum Beispiel Farbwerte zu verändern (z. B.: Sättigung oder Helligkeit verändern) oder komplexere mathematische Berechnungen durchzuführen (z. B.: sin, cos, sqrt).[11]

@meineFarbe: #143352;
@size: 10px;

#header {
  background-color: @meineFarbe;
}
h2 {
  color: saturate(@meineFarbe, 20%);
  font-size: @size * 4;
}

Dies wird kompiliert zu:

#header {
  background-color: #143352;
}
h2 {
  color: #0a335c;
  font-size: 40px;
}

Siehe auch

[Bearbeiten | Quelltext bearbeiten]
  • Sass (Stylesheet-Sprache)
  • Stylus (Stylesheet-Sprache)
  • Bootstrap (Framework)

Literatur

[Bearbeiten | Quelltext bearbeiten]
  • Alex Libby: Instant LESS CSS Preprocessor How-to., Packt Publishing, 2013, ISBN 978-1-78216-376-3.

Weblinks

[Bearbeiten | Quelltext bearbeiten]
Wikiversity: Kurs:Neueste Internet- und WWW-Technologien/Less CSS – Kursmaterialien
  • Offizielle Website (englisch)
  • Less auf Github (englisch)
  • Do more in CSS with LESS, IBM Developer Works
  • Florence Maurice: CSS-Konzentrat: LESS bietet mehr. PC Magazin, 3. Juli 2012, abgerufen am 4. Oktober 2013. 
  • Dieter Petereit: 8 kostenlose Tools: Von CSS zu LESS und wieder zurück. drweb.de, 9. Mai 2012, abgerufen am 4. Oktober 2013. 

Einzelnachweise

[Bearbeiten | Quelltext bearbeiten]
  1. ↑ Release 4.4.1. 25. August 2025 (abgerufen am 20. September 2025).
  2. ↑ github.com.
  3. ↑ Ilja Zaglov: Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow. In: T3N Magazin. 27. August 2013, abgerufen am 6. Februar 2016. 
  4. ↑ About. History. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  5. ↑ Usage. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  6. ↑ Language Features. Variables. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  7. ↑ Language Features. Mixins. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  8. ↑ Vergleiche Can I use... CSS3 Border-radius (rounded corners) oder ohne Zeitangabe direkt in den MDN Web Docs, siehe border-radius - browser compatibility.
  9. ↑ Language Features. Nested Rules. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  10. ↑ Language Features. Operations. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
  11. ↑ Functions. In: lesscss.org. Abgerufen am 6. Februar 2016 (englisch). 
Abgerufen von „https://de.teknopedia.teknokrat.ac.id/w/index.php?title=Less_(Stylesheet-Sprache)&oldid=254138023“
Kategorien:
  • Stylesheet-Sprache
  • Cascading Style Sheets
  • JavaScript-Bibliothek

  • indonesia
  • Polski
  • العربية
  • Deutsch
  • English
  • Español
  • Français
  • Italiano
  • مصرى
  • Nederlands
  • 日本語
  • Português
  • Sinugboanong Binisaya
  • Svenska
  • Українська
  • Tiếng Việt
  • Winaray
  • 中文
  • Русский
Sunting pranala
Pusat Layanan

UNIVERSITAS TEKNOKRAT INDONESIA | ASEAN's Best Private University
Jl. ZA. Pagar Alam No.9 -11, Labuhan Ratu, Kec. Kedaton, Kota Bandar Lampung, Lampung 35132
Phone: (0721) 702022
Email: pmb@teknokrat.ac.id