MENOS - Usando menos no navegador

Less é usado no navegador quando você deseja compilar o arquivo Less dinamicamente quando necessário e não no servidor; isso ocorre porque less é um arquivo javascript grande.

Para começar, precisamos adicionar o script LESS para usar o LESS no navegador -

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

Para encontrar as tags de estilo na página, precisamos adicionar a seguinte linha na página. Ele também cria as tags de estilo com o css compilado.

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

Opções de configuração

Antes da tag de script, as opções podem ser definidas no objeto less programaticamente. Isso afetará todo o uso programático de less e as tags de link iniciais.

Por exemplo, podemos definir a opção a seguir -

<script>
   less = {
      env: "development"
   };
</script>

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

Também podemos definir a opção em outro formato na tag do script, conforme especificado abaixo -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

Você também pode adicionar essas opções às tags de link.

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

Os pontos que precisam ser considerados para opções de atributos são -

window.less <script tag <link tag são o nível de importância.
Os atributos de dados não podem ser escritos em caixa de camelo; as opções de tag de link são representadas como opções de tempo.
Os atributos de dados com valores diferentes de string devem ser JSON válidos.

Modo Assistir

O modo de observação pode ser ativado definindo a opção env para desenvolvimento e chamando less.watch () após o arquivo less.js ser adicionado. Se desejar que o modo de observação seja ativado temporariamente, adicione #! Watch ao URL.

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

Modificar Variáveis

A modificação do tempo de execução da variável LESS está habilitada. O arquivo LESS é recompilado quando o novo valor é chamado. O código a seguir mostra o uso básico de modificar variáveis -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

Depurando

Podemos adicionar a opção ! DumpLineNumbers: mediaquery à opção url ou dumpLineNumbers conforme mencionado acima. A opção mediaquery pode ser usada com FireLESS (exibe o nome do arquivo LESS original e o número da linha dos estilos CSS gerados pelo LESS.)

Opções

Antes de carregar o arquivo de script less.js, as opções devem ser definidas em um objeto less global .

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

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

async- É um tipo booleano. Os arquivos importados são solicitados com a opção assíncrona ou não. Por padrão, é falso.
dumpLineNumbers- É um tipo de string. No arquivo css de saída, as informações da linha de origem são adicionadas quando dumpLineNumbers é definido. Ajuda na depuração de onde veio a regra específica.
env- É um tipo de string. O env pode ser executado em desenvolvimento ou produção. O desenvolvimento é definido automaticamente quando o URL do documento começa comfile:// ou está presente em sua máquina local.
errorReporting - Quando a compilação falha, o método de relatório de erros pode ser definido.
fileAsync- É um tipo booleano. Quando uma página está presente com um protocolo de arquivo, ela pode solicitar se deseja importar de forma assíncrona ou não.
functions - É tipo de objeto.
logLevel- É um tipo de número. Ele exibe o nível de registro no console javascript.
- 2: Informações e erros
- 1: Erros
- 0: nada
poll- No modo relógio, o tempo é exibido em milissegundos entre as pesquisas. É um tipo inteiro; por padrão, é definido como 1000.
relativeUrls- Os URLs se ajustam para serem relativos; por padrão, esta opção é definida como falsa. Isso significa que os URLs já são relativos ao arquivo sem entrada. É um tipo booleano.
globalVars- Insere a lista de variáveis globais no código. A variável de tipo de string deve ser incluída entre aspas
modifyVars- É diferente da opção de variável global. Ele move a declaração no final do seu arquivo less.
rootpath - Ele define caminhos no início de cada recurso de URL.
useFileCache- Usa cache de arquivo por sessão. O cache em menos arquivos é usado para chamar modifyVars onde todos os menos arquivos não serão recuperados novamente.