~2025-40820-48: verb.

2025-12-14T20:53:20Z

verb.

Neue Seite

{{Infobox Programmiersprache
| Name = Less
| Logo = [[Datei:LESS Logo.svg|200px]]
| Paradigma =
| Erscheinungsjahr = 
| Designer = Alexis Sellier
| Entwickler = Alexis Sellier, Dmitry Fadeyev
| AktuelleVersion = 
| AktuelleVersionFreigabeDatum = 
| Typisierung = [[Dynamische Typisierung|Dynamisch]]
| Implementierung =
| Dialekte =
| Standardisierungen =
| Beeinflusst_von = [[Cascading Style Sheets|CSS]], [[Sass (Stylesheet-Sprache)|Sass]]
| Beeinflusste = [[Sass (Stylesheet-Sprache)|Sass]]
| Betriebssystem = [[plattformübergreifend]]
| Lizenz = 
| Website = [http://lesscss.org/ lesscss.org]
}}

'''Less''' ([[Englische Sprache|englisch]] für ''weniger'') ist eine [[Stylesheet-Sprache]] mit dem Ziel, das Schreiben von [[Cascading Style Sheets|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 [[Compiler|kompiliert]].<ref name="t3n-besseres-css-mit-less" />

== Geschichte ==
Die Sprache wurde von Alexis Sellier (auch bekannt als Cloudhead) entwickelt und im Jahr 2009 veröffentlicht. Anfangs wurde der Less-Compiler in [[Ruby (Programmiersprache)|Ruby]] entwickelt. Später entschied man sich dazu, auf [[JavaScript]] umzusteigen.<ref name="lesscss-org-about" />

== Eigenschaften ==
Zusätzlich zu den normalen [[Cascading Style Sheets|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 (Programmiersprache)|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 [[Mixin]]s: 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 ==
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.<ref name="lesscss-org-usage" /> Dies kann Zeit bei der Entwicklung sparen.

== Codebeispiele ==
=== Variablen ===
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.<ref name="lesscss-org-language-features-variables" />
<syntaxhighlight lang="css">
@meineFarbe: #143352;

#header {
background-color: @meineFarbe;
}
h2 {
color: @meineFarbe;
}
</syntaxhighlight>
Wird das ganze nun kompiliert, erhält man folgendes Ergebnis:
<syntaxhighlight lang="css">

#header {
background-color: #143352;
}
h2 {
color: #143352;
}
</syntaxhighlight>

=== Mixins ===
In Mixins können mehrere Eigenschaften definiert werden, welche anschließend – ähnlich wie Variablen – Verwendung finden. Zudem können Parameter übergeben werden.<ref name="lesscss-org-language-features-mixins" /> Auf diese Weise lässt sich leicht Code generieren, der mehrere [[Herstellerpräfix]]e verwendet, ohne diese jedes Mal extra angeben zu müssen.

<small>Anmerkung: Das konkrete Beispiel mit <code style="font-size:inherit">-x-border-radius</code> ist seit 2014 veraltet.<ref>Vergleiche [https://caniuse.com/border-radius Can I use... CSS3 Border-radius (rounded corners)] oder ohne Zeitangabe direkt in den [[MDN Web Docs]], siehe [https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#browser_compatibility border-radius - browser compatibility].</ref> Die Varianten mit Präfix sind seitdem wirkungslos.</small>

<syntaxhighlight lang="css">
.rund (@radius: 4px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rund;
}
#footer {
.rund(21px);
}
</syntaxhighlight>
Dies wird kompiliert zu:
<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight>

=== Verschachtelung ===
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.<ref name="lesscss-org-language-features-nested-rules" />

<syntaxhighlight lang="css">
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
</syntaxhighlight>
Dies wird kompiliert zu:
<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight>

=== Operationen und Funktionen ===

In Less können arithmetische Operatoren zur Berechnung von Werten verwendet werden.<ref name="lesscss-org-language-features-operations" /> 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).<ref name="lesscss-org-functions" />

<syntaxhighlight lang="css">
@meineFarbe: #143352;
@size: 10px;

#header {
background-color: @meineFarbe;
}
h2 {
color: saturate(@meineFarbe, 20%);
font-size: @size * 4;
}
</syntaxhighlight>
Dies wird kompiliert zu:
<syntaxhighlight lang="css">
#header {
background-color: #143352;
}
h2 {
color: #0a335c;
font-size: 40px;
}
</syntaxhighlight>

== Siehe auch ==

* [[Sass (Stylesheet-Sprache)]]
* [[Stylus (Stylesheet-Sprache)]]
* [[Bootstrap (Framework)]]

== Literatur ==
* Alex Libby: ''Instant LESS CSS Preprocessor How-to.'', Packt Publishing, 2013, ISBN 978-1-78216-376-3.

== Weblinks ==
{{Wikiversity|Kurs:Neueste Internet- und WWW-Technologien/Less CSS}}
* [http://lesscss.org Offizielle Website] (englisch)
* [https://github.com/less Less auf Github] (englisch)
* [http://www.ibm.com/developerworks/library/wa-less/ Do more in CSS with LESS, IBM Developer Works]
* {{Internetquelle | url=http://www.pc-magazin.de/ratgeber/css-konzentrat-less-bietet-mehr-1277436.html | titel=CSS-Konzentrat: LESS bietet mehr | autor=Florence Maurice | hrsg=PC Magazin | datum=3. Juli 2012 | zugriff=2013-10-04}}
* {{Internetquelle | url=http://www.drweb.de/magazin/8-kostenlose-tools-von-css-zu-less-und-wieder-zuruck/ | titel=8 kostenlose Tools: Von CSS zu LESS und wieder zurück | autor=Dieter Petereit | hrsg=drweb.de | datum=9. Mai 2012 | zugriff=2013-10-04}}

== Einzelnachweise ==
<references>
<ref name="t3n-besseres-css-mit-less">
{{Internetquelle
| autor=Ilja Zaglov
| url=https://t3n.de/news/besseres-css-mit-less-488092/
| titel=Weniger ist mehr: So optimierst du mit LESS deinen CSS-Workflow
| werk=[[t3n]]
| datum=2013-08-27
| zugriff=2016-02-06
| sprache=de
}}
</ref>
<ref name="lesscss-org-about">
{{Internetquelle
| url=http://lesscss.org/about
| titel=About
| titelerg=History
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-usage">
{{Internetquelle
| url=http://lesscss.org/usage
| titel=Usage
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-language-features-variables">
{{Internetquelle
| url=http://lesscss.org/features/#features-overview-feature-variables
| titel=Language Features
| titelerg=Variables
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-language-features-mixins">
{{Internetquelle
| url=http://lesscss.org/features/#features-overview-feature-mixins
| titel=Language Features
| titelerg=Mixins
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-language-features-nested-rules">
{{Internetquelle
| url=http://lesscss.org/features/#features-overview-feature-nested-rules
| titel=Language Features
| titelerg=Nested Rules
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-language-features-operations">
{{Internetquelle
| url=http://lesscss.org/features/#features-overview-feature-operations
| titel=Language Features
| titelerg=Operations
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
<ref name="lesscss-org-functions">
{{Internetquelle
| url=http://lesscss.org/functions
| titel=Functions
| werk=lesscss.org | zugriff=2016-02-06
| sprache=en
}}
</ref>
</references>

{{SORTIERUNG:Less}}
[[Kategorie:Stylesheet-Sprache]]
[[Kategorie:Cascading Style Sheets]]
[[Kategorie:JavaScript-Bibliothek]]

Less (Stylesheet-Sprache) - Versionsgeschichte

~2025-40820-48: verb.