LESS

Μεταβλητές

Η LESS επιτρέπει τον ορισμό μεταβλητών με το σύμβολο παπάκι (@) και ανάθεση αυτών με άνω κάτω τελεία (:).
Κατά την μετάφραση, οι τιμές των μεταβλητών εκχωρούνται στο παραγόμενο CSS.
@color: #4D926F;
 
#header {
  color: @color;}h2 {
  color: @color;}
Αποτέλεσμα του παραπάνω κώδικα σε CSS.
#header {
  color: #4D926F;}h2 {
  color: #4D926F;}

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

H LESS υποστηρίζει εμφωλευμένα μπλοκς επιλογέων, κάτι που δεν υποστηρίζει η CSS. Έτσι, η κληρονομικότητα έχει περισσότερη σαφήνεια και τα έγγραφα στυλ διατηρούνται μικρότερα.
#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).
Ακολουθεί παράδειγμα σύνταξης, όπως παρουσιάζεται εδώ 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;}                        | }