LESS

LESS

Γενικά
Δημιουργοί	Alexis Sellier[1]
Ημερ. Δημιουργίας	2009
Είδος	ελεύθερο λογισμικό, Προεπεξεργαστής, βιβλιοθήκη
Διανομή
Έκδοση	4.2.0 (7 Σεπτέμβριος 2023)[2]
Λειτουργικά	Ανεξάρτητο πλατφόρμας
Ανάπτυξη
Άδεια χρήσης	Άδεια Apache, Έκδοση 2.0
Σύνδεσμοι
Επίσημος ιστότοπος
http://lesscss.org
Αποθετήριο κώδικα
https://github.com/less/less.js

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

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

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

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

h2 {
  color: @color;
}

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

#header {
  color: #4D926F;
}

h2 {
  color: #4D926F;
}

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

#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 επιτρέπουν την ενσωμάτωση όλων των ιδιοτήτων μιας κλάσης σε μια άλλη περιέχοντας το όνομά της σαν μια ιδιότητά της, με συμπεριφορά σαν σταθερά ή μεταβλητή. Μπορούν, επίσης να λειτουργούν ως συναρτήσεις και να δέχονται παραμέτρους. Όπως και παραπάνω στα εμφωλευμένα μπλοκ, έτσι κι εδώ αυτή η δυνατότητα δεν υπάρχει στην απλή 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;
}

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

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

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

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;
}                        | }

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

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