Less CSS @import

Al contrario del linguaggio CSS, la direttiva @import può essere inserita in qualsiasi punto di un file con estensione .less e non per forza all’inizio del file stesso.

La direttiva @import permette di organizzare meglio il codice separandolo in diversi file. Per esempio potremmo organizzare il codice in diversi file in cui inseriamo le regole specifiche per un certo elemento, gruppo di elementi o sezioni di una pagina HTML.

  tree
  .
  ├── partials
  │   ├── buttons.less
  │   ├── forms.less
  │   ├── grids.less
  │   ├── menus.less
  │   ├── normalize.less
  │   ├── tables.less
  │   └── variables.less
  └── style.less

  1 directory, 8 files
  

Nell’esempio abbiamo creato diversi file con estensione .less nella cartella partials. All’interno del file style.less importiamo solo i file necessari come riportato nell’esempio sottostante.

/* file style.less */
// Variables
@import "partials/variables";

// Normalize
@import "partials/normalize";

// Grids
@import "partials/grids";

// Buttons
@import "partials/buttons";

/*
* ... resto del codice
*/

Nello specificare il percorso dei file da importare, non è necessario aggiungere l’estensione .less. Infatti se non viene specificata alcuna estensione, il compilatore riconoscerà automaticamente che si tratta di file .less.

Bisogna evidenziare che quello appena visto, è solo uno dei possibili modi in cui utilizzare la direttiva @import. La sintassi completa è la seguente:

/* file style.less */
@import (keyword [, keyword2, keyword3...]) "filename.extension"

A seconda della keyword (in realtà è possibile specificare una o più keyword) specificata o dell’estensione del file importato, cambia il modo in cui la direttiva @import si comporta. Alcune delle opzioni più interessanti sono le seguenti:

• css: considera il file importato come un normale file CSS indipendentemente dall’estensione del file;
• optional: continua il processo di compilazione anche se il file specificato non viene trovato;
• inline: aggiunge il contenuto del file importato nel file di destinazione senza che venga eseguito alcun tipo di elaborazione da parte del compilatore;
• reference: importa il file specificato, ma non aggiunge nessuna delle regole in esso presenti nel file compilato a meno che non si faccia esplicito riferimento alle regole del file importato attraverso l’uso di mixin (ne parleremo nella prossima lezione) o della pseudo-classe extend.

Tra le varie opzioni elencate, reference è sicuramente una delle più interessanti. Infatti, quando importiamo dei file come nell’esempio visto sopra, tutte le regole presenti in quei file finiscono nel file CSS generato e spesso non è il comportamento desiderato. Grazie all’opzione reference possiamo includere nel file compilato solo le istruzioni realmente utili ed effettivamente utilizzate, riducendo di conseguenza le dimensioni del file CSS finale e rimuovendo tutte le regole non necessarie.

Vediamo attraverso un semplice esempio come l’opzione reference può realmente fare la differenza.

/* file partial.less */
@header-text-color: #ffffff;
@primary-text-color: #212121;
@primary-color: #2595f0;

@font-size-default: 16px;
@font-size--medium: 24px;
@font-size--large: 32px;

.wrapper {
  width: 960px;
  h1 {
    background-color: @primary-color;
    color: @header-text-color;
    font-size: @font-size--large;
    font-weight: 800;
  }
  p {
    color: @primary-text-color;
  }

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {

    width: 100vw; 

    h1 {
      font-size: @font-size--medium;
      font-weight: 600;
    }
  }
}

a {
  color: royalblue;
}

/* file style.less */
@import (optional, reference) "partial";

.main:extend(.wrapper) {}

Importiamo il contenuto del file partial.less utilizzando le opzioni (optional, reference). Il file style.css risultante conterrà il frammento di codice riportato sotto.

/* file style.css */
.main {
  width: 960px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .main {
    width: 100vw;
  }
}  

Al contrario, se non avessimo usato l’opzione reference, avremmo ottenuto il risultato mostrato sotto.

/* file style.css - "import senza reference" */
.wrapper,
.main {
  width: 960px;
}
.wrapper h1 {
  background-color: #2595f0;
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
}
.wrapper p {
  color: #212121;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .wrapper,
  .main {
    width: 100vw;
  }
  .wrapper h1 {
    font-size: 24px;
    font-weight: 600;
  }
}
a {
  color: royalblue;
}