Por que Isso Importa?

Se você já usou Sass para criar funções CSS, sabe o poder de ter lógica dentro do stylesheet. Agora, o CSS nativo está trazendo essa capacidade com a regra @function. Isso significa menos dependência de build tools, código mais limpo e melhor performance.

Vamos ver como funciona na prática.

Fonte: CSS-Tricks Almanac: @function

CSS custom function syntax and code example on a monitor screen Technical Structure Concept

Sintaxe e Primeiro Exemplo

/* Função que calcula a metade de qualquer valor */
@function --metade(--tamanho <length>) returns <length> {
  result: calc(var(--tamanho) / 2);
}

.container {
  margin-inline: --metade(20px); /* 10px */
}

Verificação de Tipos

@function --progresso(--atual <number>, --total <number>) returns <percentage> {
  result: calc(var(--atual) / var(--total) * 100%);
}

.barra-progresso {
  width: --progresso(3, 5); /* 60% */
}

Listas Separadas por Vírgula

Use # no parâmetro e {} na chamada:

@function --amplitude(--lista<length>#, --extra <length>) returns <length> {
  result: calc(max(var(--lista)) - min(var(--lista)) + var(--extra));
}

div {
  padding-block: --amplitude({10px, 100px, 50px, 25px}, 200px); /* 290px */
}

Lógica Condicional com Cascade

@function --tamanho-ideal() returns <length> {
  result: 16px;
  @media (width > 1000px) {
    result: 20px;
  }
}

body {
  font-size: --tamanho-ideal();
}

Funções Aninhadas e Valores Padrão

@function --quadrado(--n <number>) returns <number> {
  result: calc(var(--n) * var(--n));
}

@function --area-circulo(--raio <number>) returns <number> {
  --pi: 3.14159;
  result: calc(var(--pi) * --quadrado(var(--raio)));
}

@function --vidro-marca(--opacidade: 0.5) returns <color> {
  result: rgb(10 120 255 / var(--opacidade));
}

.header {
  background: --vidro-marca(); /* 0.5 */
}

Developer writing native CSS @function with type checking on laptop Programming Illustration

Cuidados e Limitações

  • Sem efeitos colaterais: A função só retorna um valor. Não pode alterar propriedades ou gerar múltiplas declarações. Para isso, aguarde a proposta @mixin.
  • Dependências circulares: Se uma função chama outra que chama a primeira, ambas são invalidadas.
  • Suporte experimental: Apenas Chrome 148+ suporta @function atualmente. Use fallbacks:
.elemento {
  width: 60%; /* fallback */
  width: --progresso(3, 5);
}

Próximos Passos

  • Teste no Chrome Canary com chrome://flags/#enable-experimental-web-platform-features.
  • Combine com @property para registrar propriedades customizadas com tipo.
  • Fique de olho na proposta @mixin para lógica CSS mais avançada.

Diagram of CSS cascade and custom functions interaction in web development Software Concept Art

Conclusão

@function é um passo enorme para a evolução do CSS. Menos dependência de pré-processadores, mais clareza e poder. Comece a experimentar hoje e prepare-se para o futuro do desenvolvimento web.

Artigos relacionados:

Este conteúdo foi elaborado com o auxílio de ferramentas de IA, com base em fontes confiáveis, e revisado pela nossa equipe editorial antes da publicação. Não substitui o aconselhamento de um profissional especializado.