LESS

 

 

.

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

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

Η 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 Αρχειοθετήθηκε 2013-07-29 στο Wayback Machine.	LESS Compiler	free but no explicit license[7]	Windows MacOSX Linux	Compiler
Chirpy Αρχειοθετήθηκε 2013-04-21 στο Wayback Machine.	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

Δείτε επίσης

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

Παραπομπές

http://github.com/less/less.js/blob/master/CHANGELOG.md
Official LESS website Official LESS website
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

Εγκυκλοπαίδεια Πληροφορικής

Κόσμος

Αλφαβητικός κατάλογος

Hellenica World - Scientific Library

Από τη ελληνική Βικιπαίδεια http://el.wikipedia.org . Όλα τα κείμενα είναι διαθέσιμα υπό την GNU Free Documentation License