Durante anos, desenvolvedores CSS dependeram de ferramentas externas para inserir lógica em seus estilos. Converter pixels para rem? Sass tinha uma função para isso. Alterar temas de cores com base na entrada do usuário? JavaScript era a solução. Mas agora, o CSS está avançando com @function, permitindo lógica dinâmica diretamente no CSS.

O @function permite computar valores dinâmicos, encapsulando lógica diretamente em CSS. Por exemplo, criar componentes coloridos que mudam de tema com base em uma propriedade personalizada é agora possível. O poder real é liberado com lógica condicional, utilizando a nova função if() nativa do CSS.

Como o @function funciona

Antes de substituir sus utilitários favoritos do Sass, é importante entender o funcionamento das funções personalizadas do CSS. Elas permitem a transição de valores estáticos para lógicas dinâmicas, calculando saídas com base em entradas.

:root {
    --brand-color: #3498db;
}

Uma @function não apenas armazena valores, mas os computa. Com a lógica condicional, como o uso da função if(), podemos criar componentes que mudam de tema e ícones com base em uma propriedade personalizada.

Substituindo utilitários comuns do Sass

Padrão 1: o clássico conversor rem()

Uma das tarefas mais comuns de uma função Sass é converter valores em pixels para unidades rem para tipografia escalável. Agora podemos replicar essa utilidade essencial de forma nativa.

@function --rem(--pixels) {
    result: calc(var(--pixels) / 16)rem;
}

O CSS @function representa um avanço significativo, permitindo manipulação de cores, tipografia fluida e muito mais, sem a necessidade de pré-processamento ou JavaScript.