Como usar funções em menos CSS

Less CSS é um pré-processador de CSS robusto e dinâmico que atraiu atenção e popularidade significativas nos últimos anos. Como pré-processador, ele serve como uma extensão do "Vanilla CSS", a linguagem de estilo CSS tradicional usada na web desenvolvimento, fornecendo uma variedade de recursos e funcionalidades adicionais que aprimoram o estilo geral experiência.

Se você é bem versado em escrever CSS padrão, pode fazer a transição perfeita para usar menos CSS sem uma curva de aprendizado acentuada. Essa compatibilidade facilita a manutenção do seu conhecimento existente de CSS enquanto aproveita os recursos avançados do Less.

O que são funções e por que são importantes?

Na programação, uma função é um bloco de código que executa uma tarefa específica. Você também pode reutilizá-lo em outro lugar no programa. As funções geralmente recebem dados, os processam e retornam os resultados.

Eles facilitam a redução de código duplicado em um programa. Por exemplo, digamos que você tenha um programa que calcula o desconto com base no preço inserido pelo usuário. Em um linguagem como JavaScript, você poderia implementá-lo assim:

funçãocheckDiscount(preço, limite){
se (preço >= limite){
deixar desconto = 5/100 * preço;
retornar`Seu desconto é $${desconto}`;
 } outro {
retornar`Desculpe, este item não se qualifica para um desconto. `
 }
}

Então você pode chamar a função e passar no preço e a limite.

deixar preço = prompt("Digite o preço do item: ")
alerta (checkDiscount (preço, 500))

Ao abstrair a lógica de verificação de descontos, o programa não é apenas legível, mas agora você tem um bloco de código reutilizável que processa o desconto e retorna o resultado. Há muito mais que as funções podem fazer, mas isso é apenas o básico.

Compreendendo funções em menos CSS

No CSS tradicional, há um conjunto muito limitado de funções disponíveis para você como desenvolvedor. Uma das funções mais populares em CSS é o função matemática calc() que faz exatamente o que parece - executa cálculos e usa o resultado como um valor de propriedade em CSS.

p{
cor de fundo: vermelho;
largura: cálculo(13px- 4px);
}

No Less CSS, existem várias funções que fazem mais do que apenas operações aritméticas. Uma função que você pode encontrar em Less é a se função. O se função recebe três parâmetros: uma condição e dois valores. O bloco de código abaixo mostra como você pode usar esta função:

@largura: 10px;
@altura: 20px;
div{
margem:se((@largura > @altura), 10px, 20px)
}

No bloco de código acima, o compilador Less verifica se a variável largura (definido pelo @ símbolo) é maior que a variável altura. Se a condição for verdadeira, a função retorna o primeiro valor após a condição (10px). Caso contrário, a função retorna o segundo valor (20px).

Após a compilação, a saída CSS deve ser algo como isto:

div {
margem: 20px;
}

Como usar um booleano em menos

Um booleano é uma variável que tem dois valores possíveis: verdadeiro ou falso. Com o boleano() função em Less, você pode armazenar o valor verdadeiro ou falso de uma expressão em uma variável para uso posterior. Veja como funciona.

@cor do texto: vermelho;
@bg-color: boolean(@text-color = red);

No bloco de código acima, o compilador Less verifica se cor do texto é vermelho. Então o bg-color variável armazena o valor.

div{
cor de fundo: se(@bg-color,verde amarelo);
}

O bloco de código acima compila para algo como isto:

div {
cor de fundo: verde;
}

Substituindo o texto dentro de uma string com a função replace()

A sintaxe para o substituir() a função fica assim:

substituir(corda, padrão, substituição, bandeiras)

corda representa a string que você deseja pesquisar e substituir. padrão é a string a ser procurada. padrão também pode ser uma expressão regular, mas geralmente é uma string. Após uma correspondência bem-sucedida, o compilador Less CSS substitui esse padrão com o substituição.

Opcionalmente, o substituir() função também pode conter o bandeiras parâmetro para sinalizadores de expressão regular.

@corda: "Olá";
@padrão: "olá";
@substituição: "eu";
div::antes{
contente: substituir(@corda,@padrão,@substituição)
}

O bloco de código acima deve resultar no seguinte após a compilação:

div::antes {
contente: "Oi";
}

Listar funções em menos CSS

Em Less CSS, você usa vírgulas ou espaços para definir uma lista de valores. Por exemplo:

@mantimentos: "pão", "banana", "batata", "leite";

Você pode usar o comprimento() função para avaliar o número de elementos na lista.

@resultado: comprimento(@mercearia);

Você também pode usar o extrair() função para extrair o valor em uma determinada posição. Por exemplo, se você deseja obter o terceiro elemento no mantimentos lista, você faz o seguinte:

@terceiro elemento: extract(@mercearia, 3);

Ao contrário das linguagens de programação regulares em que o índice da lista começa em 0, o índice inicial de uma lista em Less CSS é sempre 1.

Outra função de lista que pode ser útil ao criar sites com Less é a faixa() função. Leva em três parâmetros. O primeiro parâmetro especifica a posição inicial no intervalo. O segundo parâmetro indica a posição final e o último parâmetro especifica o valor de incremento ou decremento entre cada item do intervalo. Se não for fornecido, o valor padrão é 1.

div {
 margem: intervalo (10px, 40px, 10);
}

O bloco de código acima deve ser compilado para o seguinte:

div {
 margem: 10px 20px 30px 40px;
}

Como você pode ver, o compilador Less CSS começa a partir de 10px, aumentando o valor anterior em 10, até atingir a posição final (40px).

Construindo um site simples com menos funções CSS

É hora de reunir tudo o que você aprendeu e criar um projeto simples com menos CSS. Crie uma pasta e adicione index.htm e estilo.menos arquivos.

Abra o index.htm arquivo e adicione o seguinte código HTML.

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8">
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0">
<linkrele="folha de estilo/menos"tipo="texto/css"href="estilo.menos" />
<título>Documentotítulo>
cabeça>
<corpo>
<divaula="recipiente">
<h1>
h1>
div>
<roteiroorigem=" https://cdn.jsdelivr.net/npm/less" >roteiro>
corpo>
html>

No bloco de código acima, há um pai "recipiente"div com um vazio h1 elemento. O origem atributo no roteiro A tag aponta para o caminho para o compilador Less CSS.

Sem isso roteiro tag, o navegador não conseguirá entender seu código. Como alternativa, você pode instalar o Less CSS no seu computador via Gerenciador de pacotes de nós (NPM), executando o seguinte comando no terminal:

npm install -g menos

Sempre que estiver pronto para compilar o .menos arquivo, basta executar o comando abaixo, certificando-se de especificar o arquivo no qual o compilador deve gravar a saída.

menos estilo.menos estilo.css

No estilo.menos arquivo, crie duas variáveis, a saber: largura do recipiente e container-bg-color para representar a largura e a cor de fundo do "recipiente"div respectivamente.

@container-width: 50rem;
@container-bg-color: amarelo;

Em seguida, crie três variáveis, a saber: corda, padrão, e substituição. Em seguida, adicione os estilos para o "recipiente"div e a h1 elemento.

@corda: "Olá das crianças do planeta Terra!";
@padrão: "filhos do planeta Terra!";
@substituição: "habitantes de Plutão!";
.recipiente{
largura: @container-width;
cor de fundo: @container-bg-color;
preenchimento: se(@container-width > 30rem, faixa(20px, 80px, 20),"");
fronteira: sólido;
}
h1:primeiro filho::depois{
contente: substituir(@corda,@padrão,@substituição);
}

No bloco de código acima, o faixa() função define o preenchimento propriedade no "recipiente"div. O compilador Less deve compilar o estilo.menos arquivo no seguinte:

.recipiente {
largura: 50rem;
cor de fundo: amarelo;
preenchimento: 20px 40px 60px 80px;
fronteira: sólido;
}
h1:primeiro filho::depois {
contente: "OládeohabitantesdePlutão!";
}

Quando você abre o index.htm arquivo no navegador, isso é o que você deve ver:

Melhore sua produtividade com pré-processadores CSS

Em linguagens de programação regulares, as funções reduzem a quantidade de código que você precisa escrever e minimizam os erros. Os pré-processadores CSS, como o Less, fornecem vários recursos que facilitam a escrita do código CSS.

Os pré-processadores CSS são úteis ao trabalhar com arquivos grandes. Eles facilitam a depuração de problemas, melhorando assim a produtividade do desenvolvedor.