Como usar funções em Less CSS

O Less é um pré-processador CSS altamente considerado e versátil que ganhou amplo reconhecimento nos últimos tempos. Como uma extensão do CSS convencional, ele oferece um conjunto abrangente de recursos e capacidades avançadas que elevam o processo de estilização de sites a um nível mais alto de eficiência e flexibilidade.

Uma transição suave da utilização do CSS padrão para a incorporação do Less CSS é viável para aqueles que possuem proficiência na escrita do CSS convencional. A compatibilidade entre os dois estilos de codificação permite a manutenção sem esforço da experiência CSS preexistente, aproveitando as funcionalidades aprimoradas fornecidas pelo Less.

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

Uma função pode ser definida como uma unidade de código autónoma dentro de um programa que executa uma determinada operação ou conjunto de operações, em que as entradas são recebidas e processadas para produzir uma saída. A utilidade das funções reside na sua capacidade de serem reutilizadas em vários locais num programa, promovendo assim a modularidade e o encapsulamento. Geralmente, as funções aceitam dados de entrada, efectuam alguma operação sobre eles e fornecem o resultado como saída.

javascriptfunction calculateDiscount(price) { const percentage = 0.15; // A percentagem de desconto é fixada em 15% const discountedPrice = price * (1 - percentage); // Calcula o preço com desconto utilizando a fórmula (1 - discount%) return discountedPrice;}Nesta implementação, existem várias linhas de código que efectuam o mesmo cálculo com diferentes entradas. Isso pode ser refatorado usando conceitos de programação funcional, como funções de ordem superior e aplicação parcial, para simplificar o código e eliminar a duplicação.

 function checkDiscount(price, threshold){
    if (price >= threshold){
        let discount = 5/100 * price;
        return `Your discount is $${discount}`;
    } else {
        return `Sorry, this item does not qualify for a discount. `
    }
}

 

Pode chamar a função e fornecer o preço e o limiar como argumentos.

 let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
 

O processo de abstração tornou o programa muito legível, ao mesmo tempo que o dotou de um módulo funcional responsável pelo controlo dos descontos. Esta conceção modular permite a utilização recorrente do mecanismo de processamento de descontos e gera um rendimento dos seus resultados. É possível obter funcionalidades para além desta estrutura de base, mas o princípio fundamental mantém-se inalterado.

Compreender as funções em menos CSS

A utilização da função matemática calc() em CSS é muito apreciada pelos programadores devido à sua capacidade de efetuar cálculos e utilizar o resultado como um valor de atributo nas folhas de estilo em cascata.

 p{
    background-color: red;
    width: calc(13px - 4px);
}
 

uma expressão booleana, seguida de um valor a ser retornado se a expressão for verdadeira,

 @width: 10px;
@height: 20px;
div{
    margin:if((@width > @height), 10px, 20px)
}
 

O bloco de código acima é processado pelo compilador Less, que avalia se o valor da variável identificada pelo símbolo “@” é maior do que o da variável denotada como “height”. Caso esta circunstância se verifique, a função devolverá o valor imediatamente subsequente à avaliação, nomeadamente “10px”; caso contrário, devolverá o valor seguinte, ou seja, “20px

Recomenda-se que, após o processo de compilação, o CSS resultante se assemelhe ao seguinte formato:

 div {
    margin: 20px;
}
 

Como usar um booleano em Less

Uma variável booleana é um tipo de dados que contém dois valores distintos, ou seja, “verdadeiro” e “falso”. A função boolean() em Less serve para atribuir o resultado de uma expressão como verdadeiro ou falso a uma variável, que pode ser utilizada posteriormente. Esta funcionalidade funciona da seguinte forma.

 @text-color: red;
@bg-color: boolean(@text-color = red);
 

Acima, o compilador Less avalia se a cor do texto é vermelha. Em caso afirmativo, ele salva o valor da cor de fundo no arquivo

 div{
    background-color: if(@bg-color,green,yellow);
}
 

O código mencionado acima, quando compilado, resulta em um arquivo

 div {
  background-color: green;
}
 

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

A sintaxe da função replace() de parece estar na forma de:

 replace(string, pattern, replacement, flags)
 

A “string” significa o texto que se deseja procurar e alterar dentro do parâmetro dado. O “padrão” serve como o conteúdo procurado a ser encontrado e substituído pelo seu correspondente “substituto”. Este processo ocorre no âmbito do compilador Less CSS, em que o “padrão” especificado pode ser uma simples cadeia de caracteres ou uma expressão regular mais complexa. Ao identificar uma instância correspondente do “padrão”, o sistema substituirá o “substituto” no seu lugar.

A função replace() pode, opcionalmente, incluir o parâmetro flags para especificar sinalizadores de expressões regulares.

 @string: "Hello";
@pattern: "ello";
@replacement: "i";

div::before{
    content: replace(@string,@pattern,@replacement)
}
 

O bloco de código acima mencionado, após

 div::before {
  content: "Hi";
}
 

Funções de lista em CSS Less

Em less, utilizam-se vírgulas ou espaços para delinear uma série de valores.

 @groceries: "bread", "banana", "potato", "milk";
 

Pode-se utilizar a função “length()” para determinar a quantidade de elementos presentes num array listado.

 @result: length(@groceries);
 

A função extract() permite obter um elemento específico de uma determinada lista.Ao contrário das linguagens de programação típicas em que o índice de uma lista começa em 0, o índice inicial de uma lista no Less CSS começa automaticamente em 1.

o ponto inicial do intervalo, o ponto final do intervalo e um valor opcional para aumentar ou diminuir os itens dentro do intervalo. Um valor padrão de 1 será usado se nenhum valor de incremento ou decremento for especificado.

 div {
    margin: range(10px, 40px, 10);
}
 

O bloco de código dado é um conjunto de instruções para compilar

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

O comportamento do compilador Less CSS é começar com um valor base de 10 pixels e incrementar a magnitude anterior em 10 unidades, até atingir a sua posição final em 40 pixels.

Construindo um site simples com funções do Less CSS

Sugiro que você consolide todo o seu conhecimento sobre o Less CSS criando um projeto simplificado que inclua um arquivo “index.html” e um arquivo “style.less” em uma pasta designada.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" type="text/css" href="style.less" />
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h1>
        </h1>
    </div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
 

Acima do bloco de código, existe um contentor principal com um elemento div que atualmente não tem conteúdo no seu elemento de título h1 . A etiqueta script presente no seu interior especifica a localização do ficheiro do compilador Less CSS utilizando o seu atributo src .

A utilização da etiqueta