Less metodi di stile



Per la gestione degli stili Magento utilizza Less

Breve introduzione a Less

Less è un pre-processore che estende il linguaggio CSS. Less usa :

  • Variabili: cioe’ parametri per definire il codice CSS. Esempio:

    @color: white; div {color: @color}

  • Mixin:
    Mixin sono un modo per includere ("mescolare") un gruppo di proprietà
    da una regola impostata in un altro set di regole. Esempio:

    .color {color: white}; div{.color }

  • Nesting: possibilita’ di organizzare selettori e direttive come hover. Esempio:

    @color: black; div { color: white; &: hover{ color: @color ;}

  • Operator: Operatori aritmetici e logici. Esempio:

    @fontsize:12px; div {fontsize: @fontsize*2}


Compilazione Less in Magento2

Per compilare Less in Magento occorre:

  • STORES>Configuration>Advanced>Developer
  • Store view selezionare Default Config
  • Front-end development workflow selezionare:
    • Server Side, oppure
    • Client side

File di stile del tema Magento 2

_Style.less

E’ il file attraverso il quale viene importata la libreria dei temi preimpostati in Magento : Blank e Luma.

@import 'source/lib/_lib.less';
@import 'source/_sources.less';
@import 'source/_components.less';

_theme.less

Il file _theme.less contiene le modifiche di stile che si desidera apportare. Sono scritte in formato.less, Magento le trasformerà formato.css. Per esempio cambiare il colore dei link etc..

_module.less

Il contenuto di questo file, per prima cosa è copiato dall’equivalente nel tema luma. Quest’ultimo file si trova in:

<magento dir>/vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source

Dopo aver copiato il file, si possono fare delle modifiche ai componenti presenti nel file. Ad esempio a logo, product, footer etc…>