Como configurar rapidamente o Less.js

Less.js (ou apenas Less) é um pré-processador de CSS que pode revolucionar a maneira como você escreve CSS. E é fácil de instalar e configurar para desenvolvimento web.

Existem várias maneiras de instalar e configurar o Less, mas para desenvolver no navegador, ou se você estiver interessado apenas em experimentá-lo sem precisar instalá-lo em um servidor web, a maneira mais rápida é referenciar a less.jsbiblioteca em um documento HTML . Deixa-me mostrar-te como.

Primeiro, baixe o Less.js do GitHub .

Alternativamente: Se você usa Git , abra a CLI, navegue até o diretório do seu projeto e, em seguida, clone o repositório Less para o seu computador:

git clone https://github.com/less/less.js.git

Há muitos arquivos e diretórios dentro do less.js-masterdiretório quando você o abre, mas estamos interessados apenas no que está dentro do distdiretório (que no jargão de código aberto é a abreviação de diretório de “distribuição”, os arquivos para uso em produção).

Dentro do distdiretório você encontrará dois arquivos JavaScript: less.jse less.min.js, você pode usar qualquer um deles.

less.jsé a versão comentada, o que é ótimo se você gosta de ler código fonte.

less.min.jsé uma versão minificada que tem um tamanho de arquivo menor.

Coloque less.jsou less.min.jsno diretório do seu projeto.

Com seu editor de código ou editor de texto:

  1. Crie um documento HTML.
  • Crie uma folha de estilo Less. Deve ter uma extensão de arquivo de .less. Exemplo: styles.less.

No <head>seu documento HTML, faça referência à sua folha de estilo Less e ao arquivo Less JS que você colocou no diretório do seu projeto:

<head>

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

<script src=”less.js” type=”text/javascript”></script>

< /cabeça>

Testando a configuração

Agora você está pronto para usar Menos.

Para testar sua configuração, você pode escrever alguma sintaxe Less dentro de sua folha de estilo Less e depois ver se ela é renderizada corretamente em seu navegador.

O Less CSS abaixo usa as variáveis Less e as funções Less saturation()e desaturation()color.

HTML

<!DOCTYPE html> <html> <head> <title>Less.js: Configuração rápida</title> <link href=”styles.less” type=”text/css” rel=”stylesheet/less”/> < script src=”less.js” type=”text/javascript”></script>

</head> <body> <h1>Less.js: configuração rápida</h1> <p><a href=”https: //www.webfx.com/blog/web-design/set-up-less-js/”>Leia o tutorial</a></p> </body> </html>

MENOS

/* Variables */ @body-bg-color: #83b692; // green @text-color: #fff; // white @button-bg-color: #f9627d; // pink/* LESS CSS */ body { background: @body-bg-color; color: @text-color; font-family: sans-serif; text-align: center; } a:link, a:visited { background: @button-bg-color; color: @text-color; display: inline-block; padding: 10px 10px; text-decoration: none; } a:hover { background-color: desaturate(@button-bg-color, 50%); } a:active { background-color: saturate(@button-bg-color, 50%); }

Dicas de erro no navegador

Por padrão, o Less irá avisá-lo sempre que encontrar erros na página da web.

Isso é útil durante o desenvolvimento web.

Compile menos CSS antes da implantação

Quando o desenvolvimento estiver concluído, compile .lessos arquivos em arquivos regulares .css. Se você quiser fazer isso de forma rápida e suja, você pode usar um compilador Less online .

O Less CSS acima foi compilado para o seguinte usando LESSTESTER :

/* Variables */ /* LESS CSS */ body { background: #83b692; color: #ffffff; font-family: sans-serif; text-align: center; } a:link, a:visited { background: #f9627d; color: #ffffff; display: inline-block; padding: 10px 10px; text-decoration: none; } a:hover { background-color: #d08b97; } a:active { background-color: #ff5c79; }

Avançando com menos

Embora o método descrito neste tutorial seja a maneira mais rápida de começar a usar o Less, ele é melhor usado apenas para explorar, testar e desenvolver porque ter a biblioteca JavaScript processando o CSS de seu site toda vez que um visitante solicita sua página da web é ruim para o desempenho .

Quando você estiver pronto para se comprometer com o Less e usá-lo em seus projetos de desenvolvimento web, as melhores opções seriam instalá-lo e configurá-lo no servidor web ou remover a less.jsbiblioteca e compilar seu Less CSS para CSS normal.

Related Posts

4 portais que usam a tecnologia para ajudar equipes médicas

Bem-vindo ao Memória Viva, o melhor portal para cuidar da sua memória! Seja você um jovem que deseja melhorar sua capacidade de concentração, um adulto preocupado com…

5G e Além: Como as Novas Redes Estão Transformando a Conectividade e a Economia Digital

A revolução tecnológica que vivemos atualmente é impulsionada por inovações em conectividade, e uma das mais significativas é a tecnologia 5G. Essa nova geração de redes móveis…

Otimização de WordPress ilustrada por meio de tutoriais do YouTube

A otimização de sites em WordPress tornou-se uma habilidade essencial para qualquer pessoa que deseje manter sua presença online relevante e eficaz. Felizmente, com a ajuda do…

O que são listas restritivas?

As listas restritivas são ferramentas de controle utilizadas no âmbito regulatório, financeiro e comercial para identificar indivíduos, entidades ou países que estão sujeitos a certas restrições ou…

Entenda a importância do CRM Analítico na tomada de decisões estratégicas

Se existe um fator crucial para o sucesso de qualquer empresa nos dias de hoje, é a capacidade de tomar decisões informadas e estratégicas.  Nesse contexto, o…

Como atrair mais clientes através do Meta Ads para minha empresa de entregas rápidas?

Como atrair mais clientes através do Meta Ads para minha empresa de entregas rápidas?

Introdução O marketing digital desempenha um papel fundamental na aquisição de clientes para empresas de entregas rápidas. Entre as diversas estratégias disponíveis, uma das mais eficazes é…

Leave a Reply

Your email address will not be published.