Módulos Embutidos

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

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 Syntax

@use "sass:color";

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

A Sass fornece os seguintes módulos embutidos:

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
Compatibilidade (Sintaxe de Nível 4):
Sass de Dart
since 1.15.0
LibSass
✗
Sass de Ruby
✗
Compatibilidade (Alfa Por Cento):
Sass de Dart
✓
LibSass
✗
Sass de Ruby
since 3.7.0

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 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 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 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
Compatibilidade (Sintaxe de Nível 4):
Sass de Dart
since 1.15.0
LibSass
✗
Sass de Ruby
✗
Compatibilidade (Alfa Por Cento):
Sass de Dart
✓
LibSass
✗
Sass de Ruby
since 3.7.0

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 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 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 Syntax

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