Funções Especiais

A CSS define muitas funções, e a maioria delas funcionam muito bem com a sintaxe de função normal da Sass. São analisadas como chamadas de função, resolvidas para funções de CSS simples, e compiladas como estão para CSS. Embora existem algumas exceções, que têm sintaxe especial que não podem apenas ser analisadas como uma expressão de SassScript. Todas chamadas de função especial retornam sequências de caracteres sem aspas.

url()url() permalink

A função url() é comummente usada na CSS, mas sua sintaxe é diferente de outras funções: pode receber uma URL com ou sem aspas. Uma vez que uma URL sem aspas não é uma expressão de SassScript válida, a Sass precisa de lógica especial para analisá-lo.

Se o argumento da url() for uma URL sem aspas válida, a Sass analisa-o como está, ainda que a interpolação possa também ser usada para injetar valores de SassScript. Se não for uma URL sem aspas válida — por exemplo, se contém variáveis ou chamadas de função — é analisada como uma chamada de função de CSS simples normal.

SCSS Syntax

$roboto-font-path: "../fonts/roboto";

@font-face {
    // Isto é analisado como uma chamada de função normal que recebe sequência de caracteres com aspas.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // Isto é analisado como uma chamada de função normal que recebe uma expressão aritmética.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // Isto é analisado como uma função especial interpolada.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

element(), progid:...(), e expression()element(), progid:…(), e expression() permalink

Compatibilidade (calc()):
Sass de Dart
since <1.40.0
LibSass
✗
Sass de Ruby
✗
Compatibilidade (clamp()):
Sass de Dart
since >=1.31.0 <1.40.0
LibSass
✗
Sass de Ruby
✗

A função element() é definida na especificação de CSS, e já que seus identificadores poderiam ser analisados como cores, precisam de analise especial.

A expression() e funções começando com progid: são funcionalidades de Internet Explorer legados que usam sintaxe não padronizada. Embora não sejam mais suportadas por navegadores recentes, a Sass continua a analisá-los por questões de retro-compatibilidade.

A Sass permite qualquer texto nestas chamadas de função, incluindo parênteses encaixados. Nada é interpretado como uma expressão de SassScript, com a exceção de que a interpolação pode ser usada para injetar valores dinâmicos.

SCSS Syntax

$logo-element: logo-bg;

.logo {
  background: element(##{$logo-element});
}