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.