Η **LESS** (Leaner CSS) είναι μία δυναμική προ-μεταγλωττιστική (precompiled) γλώσσα φύλλων στυλ η οποία σχεδιάστηκε από τον Alexis Sellier. Ανήκει στην κατηγορία του ανοιχτού λογισμικού. Η πρώτη έκδοση εμφανίστηκε το 2009 και ήταν γραμμένη στη γλώσσα προγραμματισμού Ruby και στη συνέχεια αντικαταστάθηκε από τη JavaScript. Η σύνταξή της βασίζεται σε εμφωλευμένη ιεραρχία (nested metalanguage). Περιλαμβάνει τους εξής μηχανισμούς: μεταβλητές, εμφωλευμένα μπλοκ με στοίχιση, mixins, τελεστές και συναρτήσεις. Τρέχει είτε από την μεριά του πελάτη, είτε από την μεριά του εξυπηρετητή, ή μεταγλωττίζεται σε απλή CSS. Η γλώσσα διαφοροποιείται παρέχοντας μεταγλώττιση πραγματικού χρόνου μέσω της βιβλιοθήκης LESS.js, εν αντιθέσει με τους άλλους CSS προ-μεταγλωττιστές (όπως η Sass από την οποία επηρεάστηκε).

Μεταβλητές
----------

Η LESS επιτρέπει τον ορισμό μεταβλητών με το σύμβολο παπάκι (@) και ανάθεση αυτών με άνω κάτω τελεία (:).

Κατά την μετάφραση, οι τιμές των μεταβλητών εκχωρούνται στο παραγόμενο CSS.

```
@color: #4D926F;
 
#header {
 color: @color;
}

h2 {
 color: @color;
}

```

Αποτέλεσμα του παραπάνω κώδικα σε CSS.

```
#header {
 color: #4D926F;
}

h2 {
 color: #4D926F;
}

```

Εμφωλευμένα μπλοκ με στοίχιση
-----------------------------

Η LESS υποστηρίζει εμφωλευμένα μπλοκς επιλογέων, κάτι που δεν υποστηρίζει η CSS. Έτσι, η κληρονομικότητα έχει περισσότερη σαφήνεια και τα έγγραφα στυλ διατηρούνται μικρότερα.

```
#header {

 h1 {
 font-size: 26px;
 font-weight: bold;
 }

 p { 
 font-size: 12px;
 a { 
 text-decoration: none;
 &:hover { 
 border-width: 1px;
 }
 }
 }
}

```

Αποτέλεσμα του παραπάνω κώδικα σε 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;
}

```

Mixins
------

Τα mixins επιτρέπουν την ενσωμάτωση όλων των ιδιοτήτων μιας κλάσης σε μια άλλη περιέχοντας το όνομά της σαν μια ιδιότητά της, με συμπεριφορά σαν σταθερά ή μεταβλητή. Μπορούν, επίσης να λειτουργούν ως συναρτήσεις και να δέχονται παραμέτρους. Όπως και παραπάνω στα εμφωλευμένα μπλοκ, έτσι κι εδώ αυτή η δυνατότητα δεν υπάρχει στην απλή CSS, στην οποία πρέπει να επαναλαμβάνουμε κώδικα σε κάθε επιλογέα. Άρα, τα mixins καθιστούν τον επαναλαμβανόμενο κώδικα πιο αποδοτικό και επαναχρησιμοποιήσιμο.

```
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

#header {
 .rounded-corners;
}

#footer {
 .rounded-corners(10px);
}

```

Αποτέλεσμα του παραπάνω κώδικα σε CSS.

```
#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

```

Πράξεις και συναρτήσεις
-----------------------

Η πρόσθεση, η αφαίρεση, η διαίρεση και ο πολλαπλασιασμός των τιμών και των χρωμάτων χρησιμοποιούνται για να δημιουργήσουν πολύπλοκες σχέσεις μεταξύ των ιδιοτήτων. Οι συναρτήσεις αντιστοιχίζονται μια προς μια με τον κώδικα JavaScript, επιτρέποντας το χειρισμό των τιμών.

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

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

#footer {
 color: @base-color + #003300;
 border-color: desaturate(@red, 10%);
}

```

Αποτέλεσμα του παραπάνω κώδικα σε CSS.

```
#header {
 color: #333;
 border-left: 1px;
 border-right: 2px;
}

#footer {
 color: #114411;
 border-color: #7d2717;
}

```

Σύγκριση
--------

### Sass

Μέχρι την έκδοση 1.4, η κύρια διαφορά του LESS με τους άλλες προ-επεξεργαστές ήταν η έλλειψη κληρονομικότητας της μορφής `@extends`. Από την επόμενη έκδοση υποστηρίζεται με τη μορφή `&:extends` και `@extends`.

Η Sass σχεδιάστηκε για να απλοποιήσει και να επεκτείνει τη CSS, ενώ η LESS ήθελε να κρατήσει συντακτική ομοιότητα με τη CSS. Σαν αποτέλεσμα, ο υπάρχων CSS κώδικας είναι έγκυρος LESS κώδικας. Σαν απάντηση, σε νεότερες εκδόσεις της, η Sass εισήγαγε κι αυτή αντίστοιχη συμβατότητα (SCSS).

Ακολουθεί παράδειγμα σύνταξης, όπως παρουσιάζεται εδώ .

```
Sass | Less
-------------------------+-----------------
$color: black; | @color: black;
.scoped { | .scoped {
 $bg: blue; | @bg: blue;
 $color: white; | @color: white;
 color: $color; | color: @color;
 background-color: $bg; | background-color: @bg;
} | }
.unscoped { | .unscoped {
 color: $color; | color: @color;
 // Would be an error | // Would be an error
 // background: $bg; | // background: @bg;
} | }

```

LESS Λογισμικό
--------------

| Name | Description | Software License | Platform | Functionality |
| --- | --- | --- | --- | --- |
| WinLess | GUI LESS Compiler | Apache 2.0 | Windows | Compiler |
| Crunch | LESS editor and compiler (requires Adobe AIR) | GPL | Windows, MacOSX | CompilerEditor |
| less.js-windows | Simple command-line utility for Windows that will compile \*.less files to CSS using less.js. | MIT License | Windows | Compiler |
| less.app | LESS Compiler | Proprietary | MacOSX | Compiler |
| CodeKit | LESS Compiler | Proprietary | MacOSX | Compiler |
| SimpLESS Αρχειοθετήθηκε 2013-07-29 στο Wayback Machine. | LESS Compiler | free but no explicit license | WindowsMacOSXLinux | Compiler |
| Chirpy Αρχειοθετήθηκε 2013-04-21 στο Wayback Machine. | Compiles various JavaScript and CSS extension languages, including LESS | Ms-PL | Visual Studio Plugin | Compiler |
| Mindscape Web Workbench | Syntax highlighting and Intellisense for LESS (also Sass and CoffeeScript) | Proprietary | Visual Studio Plugin | CompilerSyntax Highlighting |
| Eclipse Plugin for LESS | Eclipse Plugin | EPL 1.0 | Eclipse Plugin | Syntax highlightingContent assist |

Δείτε επίσης
------------

* Sass (stylesheet language)
* Stylus (stylesheet language)
* Compass. CSS Authoring Framework

Παραπομπές
----------

1. ↑  «History». Ανακτήθηκε στις 2 Μάρτιος 2024.
2. ↑  «Release 4.2.0». 7 Σεπτέμβριος 2023. Ανακτήθηκε στις 18 Σεπτέμβριος 2023.
3. 1 2  Official LESS website Official LESS website
4. 1 2  Sass and Less Αρχειοθετήθηκε 2009-06-21 στο Wayback Machine. Sass and Less
5. ↑   WinLess github Issue "License Information"
6. ↑  Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
7. ↑   github license
8. ↑   license file at github (placeholder)
9. ↑   Αρχειοθετήθηκε 2016-06-16 στο Wayback Machine. Chirpy License Information at CodePlex
10. ↑  Eclipse Plugin for LESS homepage Eclipse Plugin for LESS homepage

Εξωτερικοί σύνδεσμοι
--------------------

* Official LESS website
* LESS source code repository (Git)