Sass: Folhas de Estilo Sintaticamente Incriveis

title: sass:metatitle: sass:meta permalink

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.

MisturasMisturas permalink

meta.load-css($url, $with: null)

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

Apenas a Sass de Dart atualmente suporta esta mistura.

Carrega o módulo na $url e inclui o seu CSS como se estivesse escrito como conteúdo desta mistura. O parâmetro $with fornece configuração para os módulos; se for passada, deve ser um mapa dos nomes de variáveis (sem $) para os valores destas variáveis à usar no módulo carregado.

Se $url for relativa, é interpretada como relativa ao ficheiro no qual meta.load-css() está incluída.

Tal como a regra @use:

Isto apenas avaliará o dado módulo uma vez, mesmo se for carregado várias vezes de maneiras diferentes.
Este não pode fornecer configuração para um módulo que já foi carregado, se já foi ou não carregado com configuração.

Ao contrário da regra @use:

Este não torna quaisquer membros do módulo carregado disponíveis no módulo atual.
Este pode ser usado em qualquer parte numa folha de estilo. Pode mesmo ser encaixada dentro das regras de estilos para criar estilos encaixados!
A URL do módulo sendo carregado pode vir duma variável e incluir interpolação.

⚠️ Atenção!

O parâmetro $url deveria ser uma sequência de caracteres contendo uma URL como passarias para a regra @use. Não deveria ser uma url() de CSS!

  SCSS

  Sass

  CSS

  SCSS Syntax// dark-theme/_code.scss
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}
// style.scss
@use "sass:meta";

body.dark {
  @include meta.load-css("dark-theme/code",
      $with: ("border-contrast": true));
}

  Sass Syntax// dark-theme/_code.sass
$border-contrast: false !default

code
  background-color: #6b717f
  color: #d2e1dd
  @if $border-contrast
    border-color: #dadbdf


// style.sass
@use "sass:meta"

body.dark
  $configuration: ("border-contrast": true)
  @include meta.load-css("dark-theme/code", $with: $configuration)


  CSS Outputbody.dark code {
  background-color: #6b717f;
  color: #d2e1dd;
  border-color: #dadbdf;
}

FunçõesFunções permalink

meta.calc-args($calc) //=> list

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

Retorna os argumentos para o dado cálculo.

Se um argumento for um número ou um cálculo encaixado, é retornado como este tipo. De outro modo, é retornado como uma sequência de caracteres sem aspas.

  SCSS

  Sass

  SCSS Syntax@debug meta.calc-args(calc(100px + 10%)); // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px)); // 50px, unquote("var(--width)"), 1000px

  Sass Syntax@debug meta.calc-args(calc(100px + 10%))  // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px))  // 50px, unquote("var(--width)"), 1000px

meta.calc-name($calc) //=> quoted string

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

Retorna o nome do dado cálculo.

  SCSS

  Sass

  SCSS Syntax@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

  Sass Syntax@debug meta.calc-name(calc(100px + 10%))  // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px))  // "clamp"

meta.call($function, $args...)
call($function, $args...)

Sass de Dart: ✓
LibSass: since 3.5.0
Sass de Ruby: since 3.5.0

Em versões antigas da LibSass e Sass de Ruby, a função call() recebia uma sequência de caracteres representando um nome da função. Isto foi mudado para receber um valor de função em preparação para um novo sistema de módulo onde as funções não são mais globais e assim um dado nome talvez nem sempre se refere a mesma função.

A passagem de um sequência de caracteres para call() ainda funciona em todas as implementações, mas está depreciada e será desautorizada em versões futuras.

Invoca a $function com os $args e retorna o resultado.

A $function deve ser uma função retornada pelo meta.get-function().

  SCSS

  Sass

  CSS

  SCSS Syntax@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Retorna uma cópia de $list com todos os elementos para os quais $condition retorna `true`
/// removido.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

.content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}

  Sass Syntax@use "sass:list"
@use "sass:meta"
@use "sass:string"

/// Retorna uma cópia de $list com todos os elementos para os quais $condition retorna `true`
/// removido.
@function remove-where($list, $condition)
  $new-list: ()
  $separator: list.separator($list)
  @each $element in $list
    @if not meta.call($condition, $element)
      $new-list: list.append($new-list, $element, $separator: $separator)


  @return $new-list


$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

.content
  @function contains-helvetica($string)
    @return string.index($string, "Helvetica")

  font-family: remove-where($fonts, meta.get-function("contains-helvetica"))


  CSS Output.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

meta.content-exists()
content-exists() //=> boolean

Retorna verdadeiro se um bloco @content foi passado à mistura atual.

Lança um erro se chamada fora duma mistura.

  SCSS

  Sass

  SCSS Syntax@mixin debug-content-exists {
  @debug meta.content-exists();
  @content;
}

@include debug-content-exists; // false
@include debug-content-exists { // true
  // Content!
}

  Sass Syntax@mixin debug-content-exists
  @debug meta.content-exists()
  @content


@include debug-content-exists  // false
@include debug-content-exists   // true
  // Content!

meta.feature-exists($feature)
feature-exists($feature) //=> boolean

Retorna verdadeiro se a implementação de Sass atual suporta a $feature.

A $feature deve ser uma sequência de caracteres. As funcionalidades atualmente reconhecidas são:

global-variable-shadowing, que significa que uma variável local obscurecerá uma variável global a menos que tenha a opção !global.
extend-selector-pseudoclass, que significa que a regra @extend afetará os seletores encaixados nas pseudo-classes como :not().
units-level3, que significa que aritmética de unidades suporta unidades definidas nos Valores de CSS e Unidades de Nível 3.
at-error, que significa que a regra @error é suportada.
custom-property, que significa que valores de declaração de propriedade personalizada não suportam quaisquer expressões além da interpolação.

Retorna false para qualquer $feature não reconhecida.

  SCSS

  Sass

  SCSS Syntax@debug meta.feature-exists("at-error"); // true
@debug meta.feature-exists("unrecognized"); // false

  Sass Syntax@debug meta.feature-exists("at-error")  // true
@debug meta.feature-exists("unrecognized")  // false

meta.function-exists($name, $module: null)
function-exists($name) //=> boolean

Retorna verdadeiro se uma função nomeada $name for definida, ou como uma função embutida ou uma função definida pelo utilizador.

Se $module for passado, este também verifica o módulo nomeado $module para a definição de função. $module deve ser uma sequência de caracteres correspondendo o espaço de nome numa regra @use no ficheiro atual.

  SCSS

  Sass

  SCSS Syntax@use "sass:math";

@debug meta.function-exists("div", "math"); // true
@debug meta.function-exists("scale-color"); // true
@debug meta.function-exists("add"); // false

@function add($num1, $num2) {
  @return $num1 + $num2;
}
@debug meta.function-exists("add"); // true

  Sass Syntax@use "sass:math"

@debug meta.function-exists("div", "math")  // true
@debug meta.function-exists("scale-color")  // true
@debug meta.function-exists("add")  // false

@function add($num1, $num2)
  @return $num1 + $num2

@debug meta.function-exists("add")  // true

meta.get-function($name, $css: false, $module: null)
get-function($name, $css: false, $module: null) //=> function

Retorna a função nomeada $name.

Se $module for null, este retorna a função nomeada $name sem um espaço de nome (incluindo funções embutidas globais). De outro modo, $module deve ser uma sequência de caracteres correspondendo o espaço de nome duma regra @use no ficheiro atual, no qual caso este retorna a função neste módulo nomeado $name.

Por padrão, este lança um erro se $name não referir-se à função de Sass. No entanto, se $css for true, retorna uma função de CSS simples.

A função retornada pode ser chamada usando meta.call().

  SCSS

  Sass

  CSS

  SCSS Syntax@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Retorna uma cópia de $list com todos os elementos para os quais $condition retorna `true`
/// removido.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

.content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}

  Sass Syntax@use "sass:list"
@use "sass:meta"
@use "sass:string"

/// Retorna uma cópia de $list com todos os elementos para os quais $condition retorna `true`
/// removido.
@function remove-where($list, $condition)
  $new-list: ()
  $separator: list.separator($list)
  @each $element in $list
    @if not meta.call($condition, $element)
      $new-list: list.append($new-list, $element, $separator: $separator)


  @return $new-list


$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

.content
  @function contains-helvetica($string)
    @return string.index($string, "Helvetica")

  font-family: remove-where($fonts, meta.get-function("contains-helvetica"))


  CSS Output.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

meta.global-variable-exists($name, $module: null)
global-variable-exists($name, $module: null) //=> boolean

Retorna verdadeiro se uma variável global nomeada $name (sem o $) existir.

Se $module for null, este retorna verdadeiro se uma variável nomeada $name sem um espaço de nome existir. De outro modo, $module deve ser uma sequência de caracteres correspondendo o espaço de nome duma regra @use no ficheiro atual, no qual caso este retorna verdadeiro se este módulo tiver uma variável nomeada $name.

Consulte também meta.variable-exists().

  SCSS

  Sass

  SCSS Syntax@debug meta.global-variable-exists("var1"); // false

$var1: value;
@debug meta.global-variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;
  @debug meta.global-variable-exists("var2"); // false
}

  Sass Syntax@debug meta.global-variable-exists("var1")  // false

$var1: value
@debug meta.global-variable-exists("var1")  // true

h1
  // $var2 is local.
  $var2: value
  @debug meta.global-variable-exists("var2")  // false

meta.inspect($value)
inspect($value) //=> unquoted string

Retorna uma representação de sequência de caracteres do $value.

Retorna uma representação de qualquer valor de Sass, e não apenas aqueles que podem ser representados na CSS. Como tal, o seu valor de retorno não garante ser CSS válido.

⚠️ Atenção!

Esta função está destinada para depuração; seu formato de saída não garante consistência através das versões ou implementações de Sass.

  SCSS

  Sass

  SCSS Syntax@debug meta.inspect(10px 20px 30px); // unquote("10px 20px 30px")
@debug meta.inspect(("width": 200px)); // unquote('("width": 200px)')
@debug meta.inspect(null); // unquote("null")
@debug meta.inspect("Helvetica"); // unquote('"Helvetica"')

  Sass Syntax@debug meta.inspect(10px 20px 30px)  // unquote("10px 20px 30px")
@debug meta.inspect(("width": 200px))  // unquote('("width": 200px)')
@debug meta.inspect(null)  // unquote("null")
@debug meta.inspect("Helvetica")  // unquote('"Helvetica"')

meta.keywords($args)
keywords($args) //=> map

Retorna as palavras-chave passadas à uma mistura ou função que recebe argumentos arbitrários. O argumento $args deve ser uma lista de argumento.

As palavras-chave são retornadas como um mapa a partir dos nomes de argumento como sequências de caracteres sem aspas (sem incluir $) aos valores destes argumentos.

  SCSS

  Sass

  CSS

  SCSS Syntax@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

  Sass Syntax@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)





  CSS Outputpre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

meta.mixin-exists($name, $module: null)
mixin-exists($name, $module: null) //=> boolean

Retorna verdadeiro se uma mistura nomeada $name existir.

Se $module for null, este retorna verdadeiro se uma mistura nomeada $name sem um espaço de nome existir. De outro modo, $module deve ser uma sequência de caracteres correspondendo o espaço de nome duma regra @use no ficheiro atual, no qual caso este retorna verdadeiro se este módulo tiver uma mistura nomeada $name.

  SCSS

  Sass

  SCSS Syntax@debug meta.mixin-exists("shadow-none"); // false

@mixin shadow-none {
  box-shadow: none;
}

@debug meta.mixin-exists("shadow-none"); // true

  Sass Syntax@debug meta.mixin-exists("shadow-none")  // false

@mixin shadow-none
  box-shadow: none

@debug meta.mixin-exists("shadow-none")  // true

meta.module-functions($module) //=> map

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

Atualmente apenas a Sass de Dart suporta esta função.

Retorna todas as funções definidas num módulo, como um mapa a partir dos nomes de função aos valores de função

O parâmetro $module deve ser uma sequência de caracteres correspondendo o espaço de nome duma regra @use no ficheiro atual.

  SCSS

  Sass

  SCSS Syntax// _functions.scss
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
@use "sass:map";
@use "sass:meta";

@use "functions";

@debug meta.module-functions("functions"); // ("pow": get-function("pow"))

@debug meta.call(map.get(meta.module-functions("functions"), "pow"), 3, 4); // 81

  Sass Syntax// _functions.sass
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result

@use "sass:map"
@use "sass:meta"

@use "functions"

@debug meta.module-functions("functions") // ("pow": get-function("pow"))

@debug meta.call(map.get(meta.module-functions("functions"), "pow"), 3, 4) // 81

meta.module-variables($module) //=> map

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

Atualmente apenas a Sass de Dart suporta esta função.

Retorna todas as variáveis definidas num módulo, como um mapa a partir dos nomes de variáveis (sem $) aos valores destas variáveis.

O parâmetro $module deve ser uma sequência de caracteres correspondendo o espaço de nome duma regra @use no ficheiro atual.

  SCSS

  Sass

  SCSS Syntax// _variables.scss
$hopbush: #c69;
$midnight-blue: #036;
$wafer: #e1d7d2;
@use "sass:meta";

@use "variables";

@debug meta.module-variables("variables");
// (
//   "hopbush": #c69,
//   "midnight-blue": #036,
//   "wafer": #e1d7d2
// )

  Sass Syntax// _variables.sass
$hopbush: #c69
$midnight-blue: #036
$wafer: #e1d7d2
@use "sass:meta"

@use "variables"

@debug meta.module-variables("variables")
// (
//   "hopbush": #c69,
//   "midnight-blue": #036,
//   "wafer": #e1d7d2
// )

meta.type-of($value)
type-of($value) //=> unquoted string

Retorna o tipo de $value.

Esta pode retornar os seguintes valores:

Possíveis novos valores podem ser adicionados no futuro. Pode retornar ou list ou map para (), dependendo de se foi ou não retornado por uma função de mapa.

  SCSS

  Sass

  SCSS Syntax@debug meta.type-of(10px); // number
@debug meta.type-of(10px 20px 30px); // list
@debug meta.type-of(()); // list

  Sass Syntax@debug meta.type-of(10px)  // number
@debug meta.type-of(10px 20px 30px)  // list
@debug meta.type-of(())  // list

meta.variable-exists($name)
variable-exists($name) //=> boolean

Retorna verdadeiro se uma variável nomeada $name (sem o $) existir no âmbito atual.

Consulte também meta.global-variable-exists().

  SCSS

  Sass

  SCSS Syntax@debug meta.variable-exists("var1"); // false

$var1: value;
@debug meta.variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;
  @debug meta.variable-exists("var2"); // true
}

  Sass Syntax@debug meta.variable-exists("var1")  // false

$var1: value
@debug meta.variable-exists("var1")  // true

h1
  // $var2 is local.
  $var2: value
  @debug meta.variable-exists("var2")  // true