MENO - Plugin

In questo capitolo capiremo come caricare un Plugin per espandere le funzionalità del sito. I plugin possono essere utilizzati per semplificare il tuo lavoro.

Riga di comando

Per installare il plugin utilizzando la riga di comando, devi prima installare il plugin lessc. Il plugin può essere installato usando less-plugin all'inizio. La seguente riga di comando ti aiuterà a installare il plugin clean-css -

npm install less-plugin-clean-css

Direttamente, puoi utilizzare il plug-in installato utilizzando il seguente comando:

lessc --plugin = path_to_plugin = options

Utilizzo di un plug-in nel codice

In Node, il plug-in è richiesto e viene passato in un array come plug-in di opzione a less.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

Nel browser

Prima dello script less.js, l'autore del plug-in dovrebbe includere il file javascript nella pagina.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Elenco di meno plugin

La tabella seguente elenca i plugin disponibili in LESS.

Postprocessor / Feature Plugin

Sr.No. Plugin e descrizione
1 Autoprefixer

Viene utilizzato per aggiungere prefissi a CSS dopo la traduzione da LESS.
2 CSScomb

Aiuta a migliorare la manutenzione del tuo foglio di stile.
3 clean-css

Minifica l'output CSS da LESS.
4 CSSWring

Comprime o minimizza l'output CSS da LESS.
5 css-flip

Viene utilizzato per generare il CSS da sinistra a destra (LTR) o da destra a sinistra (RTL).
6 funzioni

Scrive la funzione di LESS nello stesso LESS.
7 glob

Viene utilizzato per importare più file.
8 group-css-media-queries

Esegue la post-elaborazione per Less.
9 inline-urls

Converte automaticamente l'URL in uri di dati.
10 npm-import

Importa dal pacchetto npm per meno.
11 per favore

Viene utilizzato per postelaborare Less.
12 rtl

LESS viene invertito da ltr (da sinistra a destra) a rtl (da destra a sinistra).

Importatori di framework / biblioteche

Sr.No. Importatori e descrizione
1 Bootstrap

Il codice Bootstrap LESS viene importato prima del codice LESS personalizzato.
2 Bower Resolve

MENO file vengono importati dai pacchetti Bower.
3 Cardinal CSS per less.js

Prima del codice LESS personalizzato, viene importato il codice LESS per Cardinal.
4 Flexbox Grid

Framework importato più comunemente o importatore di librerie.
5 Sistema di rete flessibile

Importa il sistema di rete flessibile.
6 Ionico

Importa la struttura ionica.
7 Lesshat

Importa i mixin di Lesshat.
8 Scheletro

Importa il codice senza scheletro.

Librerie di funzioni

Sr.No. Importatori e descrizione
1 funzioni-colore-avanzate

È usato per trovare colori più contrastanti.
2 cubehelix

Utilizzando il valore di correzione gamma di 1, la funzione cubehelix può restituire un colore tra i due colori.
3 elenchi

Elenca la libreria delle funzioni di manipolazione.

Per gli autori di plugin

MENO consente a un autore di combinare con meno.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

  • pluginManager fornisce un supporto che può aggiungere file manager, post processori o visitatori.

  • setOptions la funzione passa la stringa.

  • printUsage viene utilizzata per spiegare le opzioni.