LESS

Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια
Μετάβαση στην πλοήγηση Πήδηση στην αναζήτηση
LESS
LESS Logo.svg
Υπευθ. ανάπτυξηςAlexis Sellier
Τελευταία έκδοση1.5.0[1] Πρότυπο:Release date
Τύποςdynamic
ΠλατφόρμαCross-platform
Άδεια χρήσηςApache License 2
Ιστοσελίδα lesscss.org

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

Μεταβλητές[Επεξεργασία | επεξεργασία κώδικα]

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

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

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

h2 {
  color: @color;
}

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

#header {
  color: #4D926F;
}

h2 {
  color: #4D926F;
}

Εμφωλευμένα μπλοκ με στοίχιση[Επεξεργασία | επεξεργασία κώδικα]

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

#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)[3].

Ακολουθεί παράδειγμα σύνταξης, όπως παρουσιάζεται εδώ 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[4] Windows Compiler
Crunch LESS editor and compiler (requires Adobe AIR) GPL[5] 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[6] Windows Compiler
less.app LESS Compiler Proprietary MacOSX Compiler
CodeKit LESS Compiler Proprietary MacOSX Compiler
SimpLESS LESS Compiler free but no explicit license[7] Windows
MacOSX
Linux
Compiler
Chirpy Compiles various JavaScript and CSS extension languages, including LESS Ms-PL[8] 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[9] Eclipse Plugin Syntax highlighting
Content assist

Δείτε επίσης[Επεξεργασία | επεξεργασία κώδικα]

Παραπομπές[Επεξεργασία | επεξεργασία κώδικα]

  1. http://github.com/less/less.js/blob/master/CHANGELOG.md
  2. 2,0 2,1 Official LESS website Official LESS website
  3. 3,0 3,1 Sass and Less Αρχειοθετήθηκε 2009-06-21 στο Wayback Machine. Sass and Less
  4. [1] WinLess github Issue "License Information"
  5. Crunch's LICENSE.txt at github Crunch's LICENSE.txt at github
  6. [2] github license
  7. [3] license file at github (placeholder)
  8. [4] Chirpy License Information at CodePlex
  9. Eclipse Plugin for LESS homepage Eclipse Plugin for LESS homepage

Εξωτερικοί σύνδεσμοι[Επεξεργασία | επεξεργασία κώδικα]