LESS - Plugins

Neste capítulo, vamos entender como um Plugin pode ser carregado para expandir a funcionalidade do site. Plugins podem ser usados ​​para facilitar seu trabalho.

Linha de comando

Para instalar o plugin usando a linha de comando, primeiro você precisa instalar o plugin lessc. O plugin pode ser instalado usando less-plugin no início. A seguinte linha de comando irá ajudá-lo a instalar o plugin clean-css -

npm install less-plugin-clean-css

Diretamente, você pode usar o plugin instalado usando o seguinte comando -

lessc --plugin = path_to_plugin = options

Usando um Plugin em Código

No Node, o plugin é necessário e é passado em um array como um plugin de opção para o less.

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

No navegador

Antes do script less.js, o autor do plugin deve incluir o arquivo javascript na página.

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

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

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

Lista de menos plugins

A tabela a seguir lista os plug-ins disponíveis no LESS.

Pós-processador / Plug-ins de recursos

Sr. Não.	Plugins e descrição
1	Autoprefixer É usado para adicionar prefixos ao CSS após a tradução do LESS.
2	CSScomb Ajuda a melhorar a manutenção da sua folha de estilo.
3	clean-css Ele minimiza a saída CSS de LESS.
4	CSSWring Ele compacta ou minimiza a saída CSS do LESS.
5	css-flip É usado para gerar o CSS da esquerda para a direita (LTR) ou da direita para a esquerda (RTL).
6	funções Ele escreve a função de LESS no próprio LESS.
7	glob É usado para importar vários arquivos.
8	group-css-media-queries Ele faz o pós-processamento para menos.
9	inline-urls Converte automaticamente o URL em uri de dados.
10	npm-import Ele importa do pacote npm por menos.
11	por favor É usado para pós-processar Less.
12	rtl LESS é invertido de ltr (da esquerda para a direita) para rtl (da direita para a esquerda).

Importadores de framework / biblioteca

Sr. Não.	Importadores e descrição
1	Bootstrap O código LESS de bootstrap é importado antes do código LESS personalizado.
2	Bower Resolve Arquivos LESS são importados dos pacotes do Bower.
3	CSS cardinal para less.js Antes do código LESS personalizado, o código LESS para Cardinal é importado.
4	Flexbox Grid Importador de biblioteca ou Framework mais comumente importado.
5	Sistema de grade flexível Importa o Sistema de Rede Flexível.
6	Iônico Ele importa a estrutura iônica.
7	Lesshat Ele importa os mixins Lesshat.
8	Esqueleto Ele importa o esqueleto menos código.

Bibliotecas de funções

Sr. Não.	Importadores e descrição
1	funções de cores avançadas É usado para encontrar cores mais contrastantes.
2	cubo helicoidal Usando o valor de correção de gama de 1, a função cubehelix pode retornar uma cor entre as duas cores.
3	listas Lista a biblioteca de funções de manipulação.

Para Autores de Plugin

MENOS permite que um autor combine com menos.

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

• pluginManager fornece um titular que pode adicionar gerenciadores de arquivos, pós-processadores ou visitantes.

• setOptions função passa a string.

• printUsage função é usada para explicar as opções.