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;
}

Sass 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

CSS Output

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 300;
}
@font-face {
  src: url(../fonts/roboto/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
✗

As versões de LibSass, Sass de Ruby, e Sass de Dart anterior a 1.40.0 analisam calc() como função sintática especial como element().

As versões de Sass de Dart 1.40.0 e adiante analisam cal() como um cálculo.

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

As versões de LibSass, Sass de Ruby, e Sass de Dart anterior a 1.31.0 analisam clamp() como uma função de CSS simples ao invés de suportar a sintaxe especial dentro dela.

As versões de Sass de Dart entre 1.31.0 e 1.40.0 analisam clamp() como função sintática especial como element().

As versões de Sass de Dart 1.40.0 e adiante analisam clamp() como um cálculo.

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});
}

Sass Syntax

$logo-element: logo-bg

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

CSS Output

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