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:
- 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.
