MENOS CSS - Guia do iniciante

O pré-processador CSS tornou-se um marco no desenvolvimento web. Ele envia CSS simples com características de programação, como Variáveis, Funções ou Mixin, e Operação que permite que desenvolvedores da Web construam Estilos CSS modulares, escalonáveis e mais gerenciáveis.

Neste post, vamos examinar o LESS, que tem sido um dos pré-processadores de CSS mais populares, e também foi amplamente implementado em várias estruturas front-end, como o Bootstrap. Nós também caminharemos pelo utilitários básicos, ferramentas e configurações para ajudar você a trabalhar com o LESS.

O compilador

Para começar, precisaremos configurar um compilador. A sintaxe LESS não é padrão, por especificação W3C. O navegador não seria capaz de processar e processar a saída, apesar de herdar traços semelhantes ao CSS.

Aqui está um vislumbre do código LESS:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; cor: @ cor-base;

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

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; cor: # 2d5e8b;

Existem várias ferramentas para compilar CSS:

Usando JavaScript

MENOS vem com um less.js arquivo que é realmente fácil de implantar em seu site. Crie uma folha de estilo com .Menos extensão e vinculá-lo em seu documento usando o rel = "stylesheet / less" atributo.

Você pode obter o arquivo JS aqui, baixá-lo através do gerenciador de pacotes Bower, ou então diretamente para o CDN, assim:

Você está pronto e pode compor estilos dentro do .Menos. A sintaxe LESS será compilada em tempo real enquanto a página é carregada. Tenha em mente que usar JavaScript é desencorajado na fase de produção, uma vez que afetará negativamente o desempenho do site.

Você deve sempre compilar a sintaxe LESS de antemão e somente servir CSS regular em vez de. Você pode usar terminal, um executor de tarefas como Grunhido ou Gole, ou uma aplicação gráfica para fazer isso.

Usando o CLI

LESS fornece uma interface de linha de comando (CLI) nativa, lessc, que lida com várias tarefas além de apenas compilar a sintaxe LESS. Usando a CLI, podemos remover os códigos, compactar os arquivos e criar um mapa de origem. O comando é baseado no Node.js que efetivamente permite que o comando funcione no Windows, OS X e Linux.

Certifique-se de que o Node.js foi instalado (caso contrário, pegue o instalador aqui) e, em seguida, instale o LESS CLI através do NPM (Node Package Manager) usando a seguinte linha de comando.

 npm install -g less

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

 lessc style.less style.css

Usando o Task Runner

O executor de tarefas é uma ferramenta que automatiza tarefas de desenvolvimento e fluxos de trabalho. Em vez de executar o lessc comando toda vez que gostaríamos de compilar nossos códigos, podemos configurar instalar um executor de tarefas, e configurá-lo para assistir as alterações dentro de nossos arquivos LESS, e imediatamente compilar menos em CSS.

Duas ferramentas populares nesta categoria hoje são Grunt e Gulp. Temos uma série de posts que cobrem essas ferramentas. Verifique as postagens para saber como implantar essas ferramentas em seu fluxo de trabalho.

Como usar o grunhido para automatizar seu fluxo de trabalho
Começando com o Gulp.js
A Batalha dos Scripts de Construção: Gulp Vs Grunt

Usando o 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. Há uma abundância de aplicativos para compilar LESS hoje para todas as plataformas - algumas gratuitas, algumas pagas

Aqui está a lista completa:

Aplicativo	Plataforma	Custo
Mistura	OS X / Windows	Livre
Coala	OS X / Windows / Linux	Livre
Prepros	OS X / Windows	Freemium (USD29)
WinLESS	janelas	Livre
CodeKit	OS X	USD32

Qual compilador você optar por (além do JavaScript) realmente não importa, francamente, desde que a ferramenta funcione e complemente o seu fluxo de trabalho, vá em frente.

O editor de códigos

Você pode usar qualquer editor de código. Simplesmente instale um plug-in ou uma extensão para destacar a sintaxe LESS com cores adequadas, um recurso que agora está disponível para quase todos os editores de código e IDEs, incluindo SublimeText, Notepad ++, VisualStudio, TextMate e Eclipse, para citar alguns.

Agora que temos o compilador e o editor de código prontos, podemos começar a escrever estilos CSS com a sintaxe LESS.

Menos sintaxe

Ao contrário do CSS regular como o conhecemos, o LESS funciona muito mais como uma linguagem de programação. É dinâmico, então espere encontrar algumas terminologias como Variáveis, Operação e Escopo pelo caminho.

Variáveis

Primeiro de tudo, vamos dar uma olhada no Variáveis.

Se você está trabalhando há algum tempo com CSS, provavelmente escreveu algo assim, onde temos valores repetitivos atribuídos em blocos de declaração em toda a folha de estilo..

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; cor: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

Esta prática é realmente boa - até que nos encontramos tendo que peneirar mais de mil ou mais trechos semelhantes em toda a folha de estilo. Isso pode acontecer quando se constrói um site em grande escala. O trabalho se tornará tedioso.

Se estivermos usando um pré-processador CSS como o LESS, a instância acima não será um problema - podemos usar Variáveis. As variáveis nos permitirão armazenar uma constante valor que depois pode ser reutilizado em toda a folha de estilo.

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; cor: @ cor-base;  .class3 border: 1px solid @ color-base;

No exemplo acima, nós armazenamos a cor # 2d5e8b no @ cor-base variável. Quando você quer mudar a cor, só precisamos alterar o valor nessa variável.

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

 @ font-family: Georgia @ dot-border: @transition pontilhada: @opacity linear: 0.5

Mixins

Em menos, podemos usar Mixins reutilizar declarações inteiras em um conjunto de regras de CSS em outro conjunto de regras. Aqui está um exemplo:

 .gradientes background: #eaeaea; plano de fundo: gradiente linear (superior, #eaeaea, #cccccc); background: -o-linear-gradient (superior, #eaeaea, #cccccc); background: -ms-linear-gradient (superior, #eaeaea, #cccccc); background: -moz-linear-gradient (superior, #eaeaea, #cccccc); background: -webkit-linear-gradient (superior, #eaeaea, #cccccc);

No trecho acima, pré-configuramos um padrão gradiente cor dentro do .gradientes classe. Sempre que queremos adicionar os gradientes, simplesmente inserimos o .gradientes deste jeito:

 div .gradients; borda: 1px sólido # 555; raio de fronteira: 3px;

o .caixa herdará todo o bloco de declaração dentro do .gradientes. Portanto, a regra CSS acima é igual ao seguinte CSS simples:

 div background: #eaeaea; plano de fundo: gradiente linear (superior, #eaeaea, #cccccc); background: -o-linear-gradient (superior, #eaeaea, #cccccc); background: -ms-linear-gradient (superior, #eaeaea, #cccccc); background: -moz-linear-gradient (superior, #eaeaea, #cccccc); background: -webkit-linear-gradient (superior, #eaeaea, #cccccc); borda: 1px sólido # 555; raio de fronteira: 3px;

Além disso, se você estiver usando muito o CSS3 em seu site, poderá usar os elementos LESS para tornar seu trabalho muito mais fácil. MENOS Elementos é uma coleção de Mixins CSS3 que podemos usar frequentemente em folhas de estilo, como raio de borda, gradientes, drop-shadow e assim por diante.

Para usar os elementos LESS, basta adicionar o @importar regra em sua folha de estilo LESS, mas não se esqueça de baixá-lo primeiro e adicioná-lo ao seu diretório de trabalho.

 @import "elements.less";

Agora podemos reutilizar todo o classes fornecido a partir do elements.less, por exemplo, para adicionar 3px raio de fronteira para um div, nós podemos escrever:

 div .rounded (3px);

Para uso posterior, consulte a documentação oficial.

Regras Aninhadas

Quando você escreve estilos em CSS simples, você também pode ter passado por essas estruturas de código típicas.

 nav altura: 40px; largura: 100%; fundo: # 455868; borda inferior: sólido 2px # 283744;  nav li width: 600px; altura: 40 px;  nav li a color: #fff; altura da linha: 40 px; text-shadow: 1px 1px 0px # 283744;

Em CSS simples, selecionamos elementos filho direcionando primeiro o pai em cada conjunto de regras, o que é consideravelmente redundante se seguirmos o “melhores práticas” princípio.

Em LESS CSS, podemos simplificar os conjuntos de regras aninhando os elementos filho dentro dos pais, do seguinte modo;

 nav altura: 40px; largura: 100%; fundo: # 455868; borda inferior: sólido 2px # 283744; li largura: 600px; altura: 40 px; um color: #fff; altura da linha: 40 px; text-shadow: 1px 1px 0px # 283744;

Você também pode atribuir pseudo-classes, gostar :flutuar, para o seletor usando o símbolo E comercial (&).

Digamos que queremos adicionar :flutuar para a tag âncora acima, podemos escrever desta forma:

 um color: #fff; altura da linha: 40 px; text-shadow: 1px 1px 0px # 283744; &: hover background-color: # 000; cor: #fff;

Operação

Podemos também realizar operações em menos, como adição, subtração, multiplicação e divisão para números, cores e variáveis na folha de estilo.

Digamos que queremos que o elemento B seja duas vezes maior que o elemento A. Nesse caso, podemos escrever da seguinte maneira:

 @ altura: 100px .element-A height: @height;  .element-B height: @height * 2;

Como você pode ver acima, primeiro armazenamos o valor no @altura variável, em seguida, atribuir o valor ao elemento A.

No elemento B, em vez de calcular a altura nós mesmos, podemos multiplicar a altura por 2 usando o operador asterisco (*). Agora, sempre que mudamos o valor no @altura variável, elemento B terá sempre o dobro da altura.

Confira exemplos de operação mais avançada em nosso tutorial anterior: Projetando uma barra de navegação de menu Slick.

Escopo

MENOS aplica o Escopo conceito, em que as variáveis serão herdadas primeiro do escopo local e, quando não estiverem disponíveis localmente, serão pesquisadas em um escopo mais amplo.

 cabeçalho @color: preto; cor de fundo: @color; nav @cor: azul; cor de fundo: @color; um color: @color;

No exemplo acima, o cabeçalho tem um Preto cor de fundo, mas navA cor de fundo será azul como tem a variável @color em seu escopo local, enquanto o uma também terá azul que é herdado de seu pai mais próximo, nav.

Pensamento final

Por fim, esperamos que este post lhe dê uma compreensão básica de como podemos escrever CSS de uma maneira melhor usando o LESS. Você talvez se sinta um pouco estranho no começo, mas à medida que você experimenta com mais frequência, certamente se tornará muito mais fácil.

Aqui estão alguns tutoriais que eu encorajo você a procurar mais dicas e práticas, que podem ajudar a levar sua habilidade LESS ao próximo nível.

LESS CSS Tutorial: Criando uma barra de navegação do menu Slick
Entendendo MENOS Funções de Cor
3 novos recursos de CSS que você deve conhecer