Como usar funções com menos CSS

As funções simplificam significativamente sua experiência de programação, e isso também vale quando você escreve código CSS.

Less CSS é um pré-processador 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 no desenvolvimento web, fornecendo uma série de recursos e funcionalidades adicionais que aprimoram a experiência geral de estilo.

Se você tiver experiência em escrever CSS padrão, poderá fazer uma transição perfeita para o uso de Menos CSS sem uma curva de aprendizado acentuada. Essa compatibilidade facilita a manutenção do seu conhecimento CSS existente enquanto aproveita os recursos avançados do Less.

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 do programa. As funções geralmente recebem dados, processam-nos 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 uma linguagem como JavaScript, você poderia implementá-lo assim:

Então você pode chamar a função e passar opreçoe alimite.

Ao abstrair a lógica de verificação de descontos, o programa não só fica 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.

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 é calc()função matemática que faz exatamente o que parece: realiza cálculos e usa o resultado como um valor de propriedade em CSS.

Em Less CSS, existem diversas funções que fazem mais do que apenas operações aritméticas. Uma função que você pode encontrar em Less é ase função. Ose A 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:

No bloco de código acima, o compilador Less verifica se a variávellargura(definido pelo@símbolo) é maior que a variávelaltura . 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 deverá ser semelhante a esta:

Um booleano é uma variável que possui dois valores possíveis:verdadeirooufalso . Com oboleano() 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.

No bloco de código acima, o compilador Less verifica secor do texto é vermelho. Então ocor bgvariável armazena o valor.

O bloco de código acima é compilado para algo assim:

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

cordarepresenta a string que você deseja pesquisar e substituir.padrãoé a string a ser pesquisada.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 issopadrãocom osubstituição.

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

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

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

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

Você também pode usar oextrair() função para extrair o valor em uma posição específica. Por exemplo, se você deseja obter o terceiro elemento no