Knowledge Base Wiki

Search for LIMS content across all our Wiki Knowledge Bases.

Type a search term to find related articles by LIMS subject matter experts gathered from the most trusted and dynamic collaboration tools in the laboratory informatics industry.

Disambiguazione – Se stai cercando altri significati, vedi Less.
Logo del preprocessore

LESS è un preprocessore CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di funzioni, operatori e variabili, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere.

LESS è open source ed è scritto in JavaScript.

Funzionamento

LESS prevede che le istruzioni css siano contenute in un file .less, che godrà sia delle comuni caratteristiche sintattiche del CSS sia delle peculiari istruzioni di LESS. Questo file può essere impiegato in due modi:

  • includendo direttamente nella pagina HTML il file .less insieme a uno script Javascript (di nome less.js, scaricabile dal sito ufficiale) che, quando il browser farà il rendering della pagina, si occuperà di fare il parsing compilando codice css che sarà automaticamente inserito all'interno del tag <head></head> del documento html.
  • includendo nella pagina HTML il file .css compilato, generato da un programma di terze parti che si occupi di fare il parsing del file .less.

Caratteristiche

Variabili

Le variabili funzionano esattamente come nei normali linguaggi di programmazione. Possono essere definite tramite il simbolo @.

Ad esempio, il seguente codice: 

 @rosso: #ff0000;
 
 a {color: @rosso}
 h1 {border-color: @rosso;}
 strong{background-color: @rosso;}

darà come risultato questo CSS compilato: 

 a {color: #ff0000}
 h1 {border-color: #ff0000;}
 strong{background-color: #ff0000;}

L'utilizzo di variabili è molto utile perché consente di modificare in un'unica volta tutte le occorrenze di un certo valore (ad esempio, un codice cromatico esadecimale, un valore in pixel, un tipo di carattere, ecc.) all'interno dell'intero file LESS.

Nidificazione

In LESS è possibile nidificare le istruzioni, rendendo il codice più compatto, conciso e leggibile.

La linea gerarchica dei selettori ricalcherà la struttura del listato: inserire un selettore tra le istruzioni di un altro selettore farà diventare quel selettore il figlio del selettore che lo contiene.

Ad esempio, questa serie di istruzioni: 

 div{
    width: 200px;
    p{
       font-size: 20px;
       strong{
          color: blue;
          text-decoration: underline;
       }
    }
 }

genererà il seguente CSS compilato: 

 div{
    width: 200px;
 }
 
 div p{
    font-size: 20px;
 }
 
 div p strong{
    color: blue;
    text-decoration: underline;
 }

Mixin

I mixin sono "set di istruzioni" che possono essere richiamati tra le proprietà di qualsiasi selettore. Qualsiasi classe o id può essere usato come mixin. Se si vuole definire un mixin senza che esso compaia come output nel css compilato, è sufficiente posporre una coppia di parentesi tonde () quando il mixin viene definito.

Classe o id come mixin

Codice LESS: 

 .mixin{
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    .mixin;
 }

CSS compilato: 

 .mixin{
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    color: red;
    font-weight:bold;
 }

Mixin escluso dall'output

Codice LESS: 

 .mixin(){
    color: red;
    font-weight:bold;
 }
 
 p{
    font-size:18px;
    .mixin;
 }

CSS compilato: 

 p{
    font-size:18px;
    color: red;
    font-weight:bold;
 }

Operatori

LESS permette di effettuare operazioni aritmetiche inserendo i valori tra parentesi tonde. Questo è molto utile se combinato con le possibilità offerte dalle variabili.

Ad esempio: 

 @var: 200px;
 
 div{
    width: (@var + 20px );
 }

Genererà: 

 div{
    width: 220px;
 }

Confronto

Sass

Sia Sass che Less sono preprocessori CSS, che consentono di scrivere CSS pulito in un costrutto di programmazione invece di regole statiche[1].

Less si ispira al Sass[2][3]. Sass è stato progettato sia per semplificare che per estendere i CSS, quindi elementi come le parentesi graffe sono stati rimossi dalla sintassi. Less è stato progettato per essere il più vicino possibile ai CSS e, di conseguenza, i CSS esistenti possono essere utilizzati come codice Less valido[4].

Le versioni più recenti di Sass hanno anche introdotto una sintassi simile a CSS chiamata SCSS (Sassy CSS).

Utilizzo sui siti

Less può essere applicato ai siti in diversi modi. Un'opzione è includere il file JavaScript less.js per convertire il codice al volo. Il browser quindi esegue il rendering dell'output CSS. Un'altra opzione è rendere il codice Less in puro CSS e caricare il CSS su un sito. Con questa opzione non vengono caricati file .less e il sito non necessita del convertitore JavaScript less.js.

Software Less

Nome Descrizione Licenza software piattaforma Funzionalità
WinLess Compilatore Less GUI Apache 2.0[5] Windows Compilatore
Crunch Less editor e compilatore (richiede Adobe AIR) GPL[6] Windows, Mac OS X Editor del compilatore
less.js-windows Semplice utility da riga di comando per Windows che compilerà file * .less in CSS utilizzando less.js. Licenza MIT[7] Windows Compilatore
less.app Compilatore Less Proprietario Mac OS X Compilatore
CodeKit Compilatore Less Proprietario Mac OS X Compilatore
LessEngine Compilatore Less Gratuito Plugin OpenCart Compilatore
SimpLESS Compilatore Less licenza gratuita ma nessuna licenza esplicita[8] Windows

Mac OS X Linux

Compilatore
Chirpy Compilatore Less Ms-PL[9] Plugin di Visual Studio Compilatore
Mindscape Web Workbench Evidenziazione della sintassi e IntelliSense per Less e Sass Proprietario Plugin di Visual Studio Evidenziazione della sintassi del compilatore
Eclipse Plugin for Less Plugin Eclipse EPL 1.0 Plugin Eclipse Evidenziazione della sintassi Compilatore di

assistenza ai contenuti

mod_less Modulo Apache2 per compilare Less al volo Open Source Linux Compilatore
grunt-contrib-less Node.js Grunt task per convertire Less in CSS Open Source Node.js Compilatore
Web Essentials Estensione di Visual Studio con supporto per Less e Sass Apache 2.0 Windows Evidenziazione della sintassi, assistenza ai contenuti, compilatore
clessc Compilatore C ++ puro GPL almeno Windows, Linux, MacOS Compilatore
Less WebCompiler Compilatore basato sul Web MIT almeno Windows, Linux, MacOS Compilatore, evidenziazione della sintassi, Minifier

Note

  1. ^ What's Wrong With CSS Archiviato il 31 gennaio 2014 in Internet Archive. What's Wrong With CSS
  2. ^ About Less About
  3. ^ Sass and Less Archiviato il 21 giugno 2009 in Internet Archive. Sass and Less
  4. ^ Sass/Less Comparison
  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] Archiviato il 16 giugno 2016 in Internet Archive. Chirpy License Information at CodePlex

Collegamenti esterni

  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica
source: https://it.wikipedia.org/wiki/LESS