O que é menos CSS e como você o usa?

Se você for um desenvolvedor de CSS experiente, estará bem ciente das desvantagens da linguagem. Ainda carece de suporte generalizado para recursos solicitados há muito tempo, como aninhamento e mixins.

Less (Leaner Style Sheets) é uma extensão do CSS com muitos recursos poderosos. Se você conhece CSS, aprender Less é fácil porque a sintaxe de Less é muito semelhante.

Como instalar menos

Você pode instalar Menos com o Gerenciador de pacotes JavaScript, NPM Correndo:

npm instalar menos -g

Após a instalação, você pode compilar .menos arquivos para .css usando o menor comando. Por exemplo, o seguinte comando compila estilo.menos e apresenta os resultados em um estilo.css arquivo.

menos estilo.menos estilo.css

Variáveis ​​em menos

Diferente CSS regular, que usa o operador "--" para definir variáveis, Less define variáveis ​​usando o símbolo "@". Por exemplo:

@largura:40px;
@altura:80px;

O bloco de código simplesmente cria duas variáveis, largura e altura, que contêm dois valores respectivamente: 40px e 80px. É uma prática comum pegar valores comumente usados ​​em CSS e armazená-los em uma variável. Isso facilita a modificação desses valores, pois há apenas uma fonte de controle.

Veja como você pode usar variáveis ​​em Less. Criar um index.htm arquivo e adicione o seguinte código clichê:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8">
<metahttp-equiv="Compatível com X-UA"contente="IE=borda">
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0">
<linkrele="folha de estilo"href="estilo.css">
<título>Usando menos CSStítulo>
cabeça>
<corpo>
<div>
 Saudações das crianças do planeta Terra!
div>
corpo>
html>

A seguir, crie um estilo.menos arquivo e adicione o seguinte:

@largura:400px;
@altura:400px;
@centro-vertical: Centro;
@txt-white: branco;
@bg-vermelho: rgb(220, 11, 11);
@font-40:40px;
div {
largura: @largura;
altura: @altura;
mostrar: flexível;
cor: @txt-white;
cor de fundo: @bg-vermelho;
tamanho da fonte: @font-40;
}

Agora, quando você pode compilar o .menos arquivo para .css usando o menor comando:

menos estilo.menos estilo.css

O CSS compilado deve ficar assim:

div {
largura: 400px;
altura: 400px;
mostrar: flex;
cor: branco;
cor de fundo: #dc0b0b;
tamanho da fonte: 40px;
}

Quando você abre seu navegador, isto é o que você deve ver:

Há muito mais que você pode fazer com variáveis ​​em Less, como interpolação, que permite usar variáveis ​​como nomes de seletores, URLs e muito mais. Aqui está um exemplo de como implementar a interpolação de variáveis:

@seletor-personalizado: recipiente;
.@{seletor personalizado} {
preenchimento: 10px;
margem: 10px;
fronteira: sólido 10px;
}

O bloco de código acima usa o @{...} cláusula para usar uma variável como um seletor. Quando compilado, o código resultará no seguinte:

.recipiente{
preenchimento: 10px;
margem: 10px;
fronteira: sólido 10px;
}

Operações aritméticas em menos

Less também fornece suporte para operações aritméticas como adição, subtração, divisão e multiplicação. Essas operações funcionam com constantes, valores e variáveis.

@variável-1:5px;
// Operação de multiplicação entre variável e constante
@variável-2:@variável-1 * 2
// Operação de adição entre valor e variável.
@variável-3:10px + @variável-2

Como Usar Mixins

Mixins permite que você reutilize estilos (ou código CSS) em toda a folha de estilo. Outro Extensões CSS como Sass também oferecem Mixins. Para ilustrar como os mixins funcionam no Less, crie um index.htm e adicione o seguinte código:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8">
<metahttp-equiv="Compatível com X-UA"contente="IE=borda">
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0">
<linkrele="folha de estilo"href="estilo.css">
<título>Usando menos CSStítulo>
cabeça>
<corpo>
<div>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. solução
 arquiteto repudiandae ipsum animi velit id iste dolore reprehenderit
 dor! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
div>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. solução
 arquiteto repudiandae ipsum animi velit id iste dolore reprehenderit
 dor! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. solução
 arquiteto repudiandae ipsum animi velit id iste dolore reprehenderit
 dor! Voluptate quos autem culpa et sit, assumenda reiciendis
 facilis unde sequi.
p>
corpo>
html>

A seguir, crie um estilo.menos arquivo e adicione as seguintes linhas:

.texto de amostra() {
cor de fundo: amarelo;
}
.primeira carta() {
cor de fundo: vermelho;
cor: branco;
tamanho da fonte: 30px;
}
p {
.texto de amostra();
}
p::primeira carta {
.primeira carta();
}

No bloco de código acima, existem duas classes mixin: .texto de amostra e .primeira carta. Quando você quiser usar um mixin em outra parte da folha de estilo, simplesmente referencie-o pelo nome com parênteses no final: .mixin(). No navegador, você deve ver algo assim:

Aninhamento de estilo em menos

Digamos que você tenha um div pai com dois elementos como filhos: um p elemento e outro div. Normalmente, se você quiser estilizar o p elemento com a cor vermelha e o div elementos com a cor verde, você pode usar a seguinte abordagem:

divp {
cor: vermelho;
}
div {
cor: verde
}

Menos fornece funcionalidade semelhante por meio do uso de nidificação. Portanto, neste caso, o menos equivalente do bloco de código acima seria:

div {
cor: verde;
p {
cor: vermelho;
 }
}

Isso não é apenas mais fácil de entender, mas também torna o código mais fácil de manter. Referenciar seletores pais com menos é mais fácil com o & operador. Por exemplo:

botão {
cor de fundo: azul;
fronteira: nenhum;
&:flutuar {
cor de fundo: cinza;
transformar: escala(1.2);
 }
}

O bloco de código acima resultará no seguinte código CSS quando compilado:

botão {
cor de fundo: azul;
fronteira: nenhum;
}
botão:flutuar {
cor de fundo: cinza;
transformar: escala(1.2);
}

Compreendendo o escopo e as funções em menos

Assim como as linguagens de programação regulares, as variáveis ​​têm o escopo do bloco no qual você as define. Para ilustrar isso, crie um novo index.htm arquivo e adicione o primeiro código clichê HTML fornecido anteriormente. Em seguida, adicione o seguinte bloco no corpo marcação:

<divaula="div externa">
 Div exterior deve ser vermelho.
<br />
<períodoaula="div interior">
 O div interno deve ser verde.
período>
div>

No estilo.menos arquivo, adicione as seguintes linhas:

@bg-color: vermelho;
corpo {
tamanho da fonte: 40px;
cor: branco;
margem: 20px;
}
.inner-div {
@bg-color: verde;
cor de fundo: @bg-color;
}
.outer-div {
cor de fundo: @bg-color;
}

O div interno bloco redefine o bg-color variável, com escopo apenas para esse bloco. Portanto, a cor verde se aplica apenas a essa classe e não afeta o global bg-color variável. Ao compilar e abrir o resultado no navegador, isto é o que você deve ver:

Menos também fornece funções úteis que podem ser benéficas em alguns cenários. Por exemplo, se você deseja definir um estilo somente se uma determinada condição for atendida, você pode fazer isso com o se função. Esta função tem a seguinte sintaxe:

se((condição), valor1, valor2)

O código retorna valor1 se a condição for satisfeita e valor2 de outra forma. Aqui está um exemplo:

@var1:20px;
@var2:20px;
div {
preenchimento: se((@var1 = @var2), 10px, 20px);
}

O bloco de código acima deve resultar no seguinte CSS quando compilado:

div {
preenchimento: 10px;
}

Faça mais com menos e outras extensões CSS

Milhares de desenvolvedores usam o Less para tornar a escrita CSS um pouco agradável. Recursos incríveis como funções, mixins e variáveis ​​são apenas uma pequena parte do que o Less oferece.

Menos é adequado para projetos pequenos e grandes. É importante notar que vale a pena conferir outras linguagens de extensão CSS igualmente incríveis, como Sass e Stylus CSS.