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

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

Μεταβλητές

Επεξεργασία

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

LESS Λογισμικό

Επεξεργασία
Name Description Software License Platform Functionality
WinLess GUI LESS Compiler Apache 2.0[5] Windows Compiler
Crunch LESS editor and compiler (requires Adobe AIR) GPL[6] Windows, MacOSX Compiler
Editor
less.js-windows Simple command-line utility for Windows that will compile *.less files to CSS using less.js. MIT License[7] 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[8] Windows
MacOSX
Linux
Compiler
Chirpy Αρχειοθετήθηκε 2013-04-21 στο Wayback Machine. Compiles various JavaScript and CSS extension languages, including LESS Ms-PL[9] Visual Studio Plugin Compiler
Mindscape Web Workbench Syntax highlighting and Intellisense for LESS (also Sass and CoffeeScript) Proprietary Visual Studio Plugin Compiler
Syntax Highlighting
Eclipse Plugin for LESS Eclipse Plugin EPL 1.0[10] Eclipse Plugin Syntax highlighting
Content assist

Δείτε επίσης

Επεξεργασία

Παραπομπές

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

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

Επεξεργασία