O que é Menos CSS e como funciona?

O LessJS é um pré-processador CSS que agora se tornou um item básico no desenvolvimento da web. Inclui CSS simples com recursos de programação como variáveis. ¿ O que é LessJS e como ele funciona ?

Funções ou mixagem e operação que permitem que os desenvolvedores da Web criem estilos CSS modulares, escaláveis ​​e mais gerenciáveis.

Neste post, discutiremos o LessJS, que tem sido um dos processadores CSS mais populares e também foi amplamente implementado em várias estruturas de front-end, como o Bootstrap .

Também exploraremos os utilitários , ferramentas e configurações básicas para ajudá-lo a começar com o LESS.

O que é o LessJS e como ele funciona?

O compilador

Para começar, precisaremos configurar um compilador. A sintaxe LESS não é padrão, de acordo com a especificação W3C. O navegador não pôde processar e gerar a saída, apesar de herdar recursos semelhantes ao CSS.

Aqui está uma olhada no código MENOS:

@ cor base: # 2d5e8b;
.class1 {
cor de fundo: @ cor-base;
.class2 {
cor de fundo: #fff;
cor: @ cor base;
}
}

O compilador processará o código e converterá a sintaxe LESS em um formato CSS compatível com o navegador:

.class1 {
cor de fundo: # 2d5e8b;
}
.class1 .class2 {
cor de fundo: #fff;
cor: # 2d5e8b;
}

O uso de JavaScript

O LessJS vem com um arquivo less.js que é realmente fácil de implementar em seu site. Crie uma folha de estilos com a extensão. less e vincule-o ao seu documento usando o atributo rel = “style sheet / less” .

<link rel = "folha de estilos / menos" type = "text / css" href = "main.less" />

Você pode obter o arquivo JS aqui, faça o download através do gerenciador de pacotes do Bower, caso contrário, é possível vinculá-lo diretamente à CDN.

<link rel = "folha de estilos / menos" type = "text / css" href = "main.less" />
<script src = "// cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less .min.js"> </script>

Todos estão configurados e podem compor estilos dentro de .less . A sintaxe do LessJS será compilada rapidamente enquanto a página é carregada.

Relacionado:  Como saber se um processador é compatível com sua placa-mãe

Observe que o uso de JavaScript não é recomendado na fase de produção, pois isso afetará seriamente o desempenho do site.

O uso do LessJS CLI

O LESS fornece uma interface de linha de comando (CLI) nativa, lessc, que lida com várias tarefas além de simplesmente compilar a sintaxe LessJS.

Usando a CLI, podemos excluir os códigos , compactar os arquivos e criar um mapa de origem. O comando é baseado no Node.js que permite efetivamente que o comando funcione no Windows, OS X e Linux.

npm install -g less

Agora você tem o comando lessc à sua disposição para compilar LESS em CSS:

lessc style.less style.css

Usar o Task RunnerRunner

Executa uma ferramenta que automatiza tarefas de desenvolvimento e fluxos de trabalho . Em vez de executar o comando lessc toda vez que gostaríamos de compilar nossos códigos.

Podemos instalar um executor de tarefas , configurá-lo para ver as alterações em nossos arquivos MENOS e compilar imediatamente MENOS em CSS.

Uso do aplicativo gráfico

Para aqueles que não estão acostumados a usar o Terminal e as linhas de comando, eles podem optar por uma interface gráfica.

Atualmente, existem muitos aplicativos para compilar o MENOS para todas as plataformas, alguns gratuitos e outros pagos.

O editor de código

Você pode usar qualquer editor de código . Basta instalar um suplemento ou extensão para destacar a sintaxe MENOS com as cores apropriadas.

Uma função que agora está disponível para quase todos os editores de código e IDE, incluindo SublimeText, Notepad ++, VisualStudio, TextMate e Eclipse, entre outros.

Sintaxe LessJS

Ao contrário do CSS normal, como o conhecemos, o LessJS funciona muito mais como uma linguagem de programação. É dinâmico, portanto, espere encontrar algumas terminologias, como Variáveis, Operação e Escopo ao longo do caminho .

Relacionado:  Tudo sobre os formulários Knockout.js

Variáveis

Vamos dar uma olhada nas variáveis. Se você trabalha há muito tempo com CSS, provavelmente escreveu algo assim, onde temos valores repetitivos atribuídos em blocos de declaração em toda a folha de estilos.

.class1 {
cor de fundo: # 2d5e8b;
}
.class2 {
cor de fundo: #fff;
cor: # 2d5e8b;
}
.class3 {
borda: 1px sólido # 2d5e8b;
}

Essa prática é muito boa , até sermos forçados a examinar mais de mil ou mais fragmentos semelhantes ao longo da folha de estilos.

Isso pode acontecer quando um site em grande escala é construído . O trabalho será tedioso, se não estivermos usando um pré-processador CSS como o LessJS.

A instância anterior não seria um problema, podemos usar variáveis . As variáveis ​​nos permitem armazenar um valor constante que pode ser reutilizado em toda a folha de estilos.

@ cor base: # 2d5e8b;
.class1 {
cor de fundo: @ cor-base;
}
.class2 {
cor de fundo: #fff;
cor: @ cor base;
}
.class3 {
borda: 1px sólido @ base de cor;
}

No exemplo anterior, armazenamos a cor # 2d5e8b na variável @ color-base . Quando você deseja alterar a cor, basta alterar o valor nessa variável.

Além da cor, você também pode colocar outros valores nas variáveis, como:

família de fontes @: Georgia
@ borda do ponto: pontilhada
@transition: linear
@opacity: 0.5
 

Você pode estar interessado:

Deixe um comentário