LESS
Η LESS (Leaner CSS) είναι μία δυναμική προ-μεταγλωττιστική (precompiled) γλώσσα φύλλων στυλ η οποία σχεδιάστηκε από τον Alexis Sellier. Ανήκει στην κατηγορία του ανοιχτού λογισμικού. Η πρώτη έκδοση εμφανίστηκε το 2009 και ήταν γραμμένη στη γλώσσα προγραμματισμού Ruby και στη συνέχεια αντικαταστάθηκε από τη JavaScript. Η σύνταξή της βασίζεται σε εμφωλευμένη ιεραρχία (nested metalanguage). Περιλαμβάνει τους εξής μηχανισμούς: μεταβλητές, εμφωλευμένα μπλοκ με στοίχιση, mixins, τελεστές και συναρτήσεις. Τρέχει είτε από την μεριά του πελάτη, είτε από την μεριά του εξυπηρετητή, ή μεταγλωττίζεται σε απλή CSS. Η γλώσσα διαφοροποιείται παρέχοντας μεταγλώττιση πραγματικού χρόνου μέσω της βιβλιοθήκης LESS.js[3], εν αντιθέσει με τους άλλους CSS προ-μεταγλωττιστές (όπως η Sass από την οποία επηρεάστηκε[4]).
Γενικά | |
---|---|
Δημιουργοί | 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
ΕπεξεργασίαΤα 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)[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 |
Δείτε επίσης
ΕπεξεργασίαΠαραπομπές
Επεξεργασία- ↑ «History». Ανακτήθηκε στις 2 Μάρτιος 2024.
- ↑ «Release 4.2.0». 7 Σεπτέμβριος 2023. Ανακτήθηκε στις 18 Σεπτέμβριος 2023.
- ↑ 3,0 3,1 Official LESS website Official LESS website
- ↑ 4,0 4,1 Sass and Less Αρχειοθετήθηκε 2009-06-21 στο Wayback Machine. Sass and Less
- ↑ [1] WinLess github Issue "License Information"
- ↑ Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
- ↑ [2] github license
- ↑ [3] license file at github (placeholder)
- ↑ [4] Αρχειοθετήθηκε 2016-06-16 στο Wayback Machine. Chirpy License Information at CodePlex
- ↑ Eclipse Plugin for LESS homepage Eclipse Plugin for LESS homepage