Módulos Embutidos

Sass de Dart: since 1.23.0
LibSass: ✗
Sass de Ruby: ✗

Atualmente apenas a Sass de Dart suporta carregar módulos embutidos com a @use. Os utilizadores de outras implementações devem chamar as funções usando os seus nomes globais.

A Sass fornece muitos módulos embutidos os quais contém funções úteis (e a mistura ocasional). Estes módulos podem ser carregados com a regra @use como qualquer folha de estilo definida pelo utilizador, e suas funções podem ser chamadas como qualquer outro membro do módulo. Todas as URLs de módulo embutido começam com sass: to indicar que são parte da própria Sass.

⚠️ Atenção!

Antes do sistema de módulo da Sass ser introduzido, todas as funções de Sass estavam disponíveis globalmente o tempo todo. Muitas funções continuam a ter pseudónimo global (estas são listas nas suas documentações). A equipa da Sass desencoraja o seu uso e eventualmente as depreciará, mas por agora continuam disponíveis por questões de compatibilidade com versões de Sass mais antigas e com a LibSass (que ainda não suporta o sistema de módulo).

Algumas funções apenas estão disponíveis globalmente até mesmo no novo sistema de módulo, seja porque tem comportamento de avaliação especial (if()) ou porque adicionam comportamento adicional sobre as funções de CSS embutidas (rgb() e hsl()). Estas não serão depreciadas e podem ser usadas livremente.

  SCSS

  Sass

  CSS

  SCSS Syntax@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

  Sass Syntax@use "sass:color"

.button
  $primary-color: #6b717f
  color: $primary-color
  border: 1px solid color.scale($primary-color, $lightness: 20%)


  CSS Output.button {
  color: #6b717f;
  border: 1px solid #878d9a;
}

A Sass fornece os seguintes módulos embutidos:

O módulo sass:math fornece funções que operam sobre os números.
O módulo sass:string que torna fácil combinar, procurar, ou dividir sequências de caracteres.
O módulo sass:color gera novas cores baseadas naquelas que existem, tornando fácil construir temas de color.
O módulo sass:list permite-te acessar e modificar valores em listas.
O módulo sass:map torna possível procurar o valor associado com uma chave num mapa, e muito mais.
O [módulo sass:seletor] fornece acesso ao poderoso motor de seletor da Sass.
O módulo sass:meta expõe os detalhes do funcionamento interno da Sass.

Funções GlobaisFunções Globais permalink

hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color

Sass de Dart: since 1.15.0
LibSass: ✗
Sass de Ruby: ✗

A LibSass e Sass de Ruby apenas suportam as seguintes assinaturas:

hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)

Nota que para estas implementações, o argumento $alpha é obrigatório se o nome de função hsla() for usado, e proibido se o nome de função hsl() for usado.

Sass de Dart: ✓
LibSass: ✗
Sass de Ruby: since 3.7.0

A LibSass e versões mais antigas da Sass de Ruby não suportam valores de alfa especificado como percentagens.

Retorna um cor com o dado tonalidade, saturação, e claridade e o dado canal de alfa.

A tonalidade é um número entre 0deg e 360deg (inclusivo) e pode estar sem unidade. A saturação e claridade são números entre 0% e 100% (inclusivo) e não pode estar sem unidade. O canal de alfa pode ser especificado como seja um número sem unidade entre 0 e 1 (inclusivo), ou como uma percentagem entre 0% e 100% (inclusivo).

💡 Fato Divertido:

Tu podes passar funções especiais como calc() ou var() no lugar de qualquer argumento para hsl(). Tu podes até mesmo usar var() no lugar de vários argumentos, já que poderia ser substituída por vários valores! Quando uma função de cor é chamada desta maneira, retorna uma sequência de caracteres sem aspas usando a mesma assinatura com qual foi chamada.

  SCSS

  Sass

  SCSS Syntax@debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%); // hsla(var(--peach), 20%)

  Sass Syntax@debug hsl(210deg 100% 20% / var(--opacity))  // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%)  // hsla(var(--peach), 20%)

⚠️ Atenção!

As regras de analise especiais da Sass para valores separados por barra torna difícil passar variáveis para $lightness ou $alpha quando usas a assinatura hsl($hue $saturation $lightness / $alpha). Ao invés disto considere usar hsl($hue, $saturation, $lightness, $alpha).

  SCSS

  Sass

  SCSS Syntax@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)

  Sass Syntax@debug hsl(210deg 100% 20%) // #036
@debug hsl(34, 35%, 92%) // #f2ece4
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(242, 236, 228, 0.2)

if($condition, $if-true, $if-false)

Retorna $if-true se a $condition for verdadeira, e de outro modo $if-false.

Esta função é especial de tal maneira que nem avalia o argumento que não é retornado, então é seguro chamar mesmo se o argumento que não é usado lançaria um erro.

  SCSS

  Sass

  SCSS Syntax@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

  Sass Syntax@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color

Sass de Dart: since 1.15.0
LibSass: ✗
Sass de Ruby: ✗

A LibSass e Sass de Ruby apenas suportam as seguintes assinaturas:

rgb($red, $green, $blue)
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

Nota que para estas implementações, o argumento $alpha é obrigatório se o nome de função rgba() for usado, e proibido se o nome de função rgb() for usado.

Sass de Dart: ✓
LibSass: ✗
Sass de Ruby: since 3.7.0

A LibSass e versões mais antigas da Sass de Ruby não suportam valores de alfa especificados como percentagens.

Se $red, $green, $blue, e opcionalmente $alpha forem passados, retorna uma cor com os dados canais de vermelho, verde, azul, e alfa.

Cada canal pode ser especificado ou como um número sem unidade entre 0 e 255 (inclusivo), ou uma percentagem entre 0% e 100% (inclusive). O canal de alfa pode ser especificado ou como um número sem unidade entre 0 e 1 (inclusivo), ou uma percentagem entre 0% e 100% (inclusivo).

💡 Fato Divertido:

Tu podes passar funções especiais como calc() ou var() no lugar de qualquer argumento para rgb(). Tu podes até mesmo usar var() no lugar de vários argumentos, já que poderia ser substituída por vários valores! Quando uma função de cor é chamada desta maneira, retorna uma sequência de caracteres sem aspas usando a mesma assinatura com qual foi chamada.

  SCSS

  Sass

  SCSS Syntax@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)

  Sass Syntax@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2)  // rgba(var(--peach), 0.2)

⚠️ Atenção!

As regras de analise especiais da Sass para valores separados por barra torna difícil passar variáveis para $blue ou $alpha quando usas a assinatura rgb($red $green $blue / $alpha). Ao invés disto considere usar rgb($red, $green, $blue, $alpha).

  SCSS

  Sass

  SCSS Syntax@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

  Sass Syntax@debug rgb(0 51 102)  // #036
@debug rgb(95%, 92.5%, 89.5%)  // #f2ece4
@debug rgb(0 51 102 / 50%)  // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)

Se $color e $alpha forem passados, este retorna $color com o dado canal $alpha ao invés do seu canal alfa original.

  SCSS

  Sass

  SCSS Syntax@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

  Sass Syntax@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366