sass:meta

meta.apply($mixin, $args...)

Kompatibilität

Dart Sass

seit 1.69.0

LibSass

✗

Ruby Sass

✗

Bindet $mixin mit $args ein. Wenn dies ein @content-Block ist, wird er an $mixin weitergeleitet.

Der $mixin muss ein Mixin-Wert sein, wie er z. B. von meta.get-mixin() zurückgegeben wird.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

Spielplatz

Sass-Syntax

@use "sass:meta"
@use "sass:string"

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list)
  @each $element in $list
    @include meta.apply($mixin, $element)



@mixin font-class($size)
  .font-#{$size}
    font-size: $size



$sizes: 8px, 12px 2rem

@include apply-to-all(meta.get-mixin("font-class"), $sizes)

CSS-Ausgabe

.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}

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

Kompatibilität

Dart Sass

seit 1.23.0

LibSass

✗

Ruby Sass

✗

➤

Lädt das Modul unter $url und bindet dessen CSS ein, als ob es der Inhalt dieses Mixins wäre. Der Parameter $with stellt die Konfiguration für die Module bereit; wenn er übergeben wird, muss es sich um eine Map von Variablennamen (ohne $) zu den Werten dieser Variablen handeln, die im geladenen Modul verwendet werden sollen.

Wenn $url relativ ist, wird er relativ zu der Datei interpretiert, in der meta.load-css() eingebunden wird.

Ähnlich wie die @use-Regel:

• Dieses wird das angegebene Modul nur einmal auswerten, auch wenn es mehrmals auf unterschiedliche Weise geladen wird.

• Dies kann einem bereits geladenen Modul keine Konfiguration bereitstellen, unabhängig davon, ob es bereits mit Konfiguration geladen wurde.

Im Gegensatz zur @use-Regel:

• Dadurch werden keine Member aus dem geladenen Modul im aktuellen Modul verfügbar gemacht.

• Dies kann überall in einer Stylesheet verwendet werden. Es kann sogar innerhalb von Stilregeln verschachtelt werden, um verschachtelte Stile zu erstellen!

• Die URL des zu ladenden Moduls kann aus einer Variablen stammen und Interpolation enthalten.

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

// 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)

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

meta.accepts-content($mixin) //=> boolean

Kompatibilität

Dart Sass

seit 1.69.0

LibSass

✗

Ruby Sass

✗

Gibt zurück, ob der angegebene Mixin-Wert einen @content-Block akzeptieren kann.

Dies gibt true zurück, wenn es *möglich* ist, dass das Mixin einen @content-Block akzeptiert, auch wenn es dies nicht immer tut so.

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

Kompatibilität

Dart Sass

seit 1.40.0

LibSass

✗

Ruby Sass

✗

Gibt die Argumente für die angegebene Berechnung zurück.

Wenn ein Argument eine Zahl oder eine verschachtelte Berechnung ist, wird es als dieser Typ zurückgegeben. Andernfalls wird es als unquote String zurückgegeben.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:meta';

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

Spielplatz

Sass-Syntax

@use 'sass:meta'

@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

Kompatibilität

Dart Sass

seit 1.40.0

LibSass

✗

Ruby Sass

✗

Gibt den Namen der angegebenen Berechnung zurück.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:meta';

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

Spielplatz

Sass-Syntax

@use 'sass:meta'

@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...)

Kompatibilität (Argumenttyp)

Dart Sass

✓

LibSass

seit 3.5.0

Ruby Sass

seit 3.5.0

➤

Ruft $function mit $args auf und gibt das Ergebnis zurück.

Die $function muss ein Funktionswert sein, wie er z. B. von meta.get-function() zurückgegeben wird.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

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

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@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"));
}

Spielplatz

Sass-Syntax

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

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@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-Ausgabe

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

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

Gibt zurück, ob dem aktuellen Mixin ein @content-Block übergeben wurde.

Löst einen Fehler aus, wenn außerhalb eines Mixins aufgerufen.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:meta';

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

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

Spielplatz

Sass-Syntax

@use 'sass:meta'

@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

Gibt zurück, ob die aktuelle Sass-Implementierung $feature unterstützt.

Das $feature muss eine Zeichenkette sein. Die aktuell anerkannten Funktionen sind

• global-variable-shadowing, was bedeutet, dass eine lokale Variable eine globale Variable überschattet, es sei denn, sie hat das Flag !global.
• extend-selector-pseudoclass, was bedeutet, dass die @extend-Regel Selektoren beeinflusst, die in Pseudoklassen wie :not() verschachtelt sind.
• units-level3, was bedeutet, dass die Einheitenarithmetik Einheiten unterstützt, die in CSS Values and Units Level 3 definiert sind.
• at-error, was bedeutet, dass die @error-Regel unterstützt wird.
• custom-property, was bedeutet, dass Werte von Custom Property Deklarationen keine anderen Ausdrücke als Interpolation unterstützen.

Gibt false für jede nicht erkannte $feature zurück.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";

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

Spielplatz

Sass-Syntax

@use "sass:meta"

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

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

Gibt zurück, ob eine Funktion namens $name definiert ist, entweder als integrierte Funktion oder als benutzerdefinierte Funktion.

Wenn $module übergeben wird, prüft dies auch das Modul mit dem Namen $module auf die Funktionsdefinition. $module muss eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";
@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

Spielplatz

Sass-Syntax

@use "sass:meta"
@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

Gibt den Funktionswert namens $name zurück.

Wenn $module null ist, wird die Funktion namens $name ohne Namespace zurückgegeben (einschließlich globaler integrierter Funktionen). Andernfalls muss $module eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht. In diesem Fall wird die Funktion in diesem Modul namens $name zurückgegeben.

Standardmäßig wird ein Fehler ausgelöst, wenn $name keine Sass-Funktion referenziert. Wenn $css jedoch true ist, wird stattdessen eine einfache CSS Funktion zurückgegeben.

Das zurückgegebene Mixin kann mit meta.apply() eingebunden werden.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

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

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@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"));
}

Spielplatz

Sass-Syntax

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

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@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-Ausgabe

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

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

Kompatibilität

Dart Sass

seit 1.69.0

LibSass

✗

Ruby Sass

✗

Gibt den Mixin-Wert namens $name zurück.

Wenn $module null ist, wird das im aktuellen Modul definierte Mixin namens $name zurückgegeben. Andernfalls muss $module eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht. In diesem Fall wird das Mixin in diesem Modul namens $name zurückgegeben.

Standardmäßig wird ein Fehler ausgelöst, wenn $name kein Mixin referenziert. Wenn $css jedoch true ist, wird stattdessen eine einfache CSS Funktion zurückgegeben.

Die zurückgegebene Funktion kann mit meta.call() aufgerufen werden.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

Spielplatz

Sass-Syntax

@use "sass:meta"
@use "sass:string"

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list)
  @each $element in $list
    @include meta.apply($mixin, $element)



@mixin font-class($size)
  .font-#{$size}
    font-size: $size



$sizes: 8px, 12px 2rem

@include apply-to-all(meta.get-mixin("font-class"), $sizes)

CSS-Ausgabe

.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}

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

Gibt zurück, ob eine globale Variable namens $name (ohne das $) existiert.

Wenn $module null ist, wird zurückgegeben, ob eine Variable namens $name ohne Namespace existiert. Andernfalls muss $module eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht. In diesem Fall wird zurückgegeben, ob dieses Modul eine Variable namens $name hat.

Siehe auch meta.variable-exists().

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";

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

Spielplatz

Sass-Syntax

@use "sass:meta"

@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

Gibt eine Zeichenkettendarstellung von $value zurück.

Gibt eine Darstellung *jedes* Sass-Werts zurück, nicht nur derjenigen, die in CSS dargestellt werden können. Daher ist der Rückgabewert nicht garantiert gültiges CSS.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";

@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"')

Spielplatz

Sass-Syntax

@use "sass:meta"

@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

Gibt die Schlüsselwörter zurück, die an ein Mixin oder eine Funktion übergeben wurden, die beliebige Argumente akzeptiert. Das Argument $args muss eine Argumentliste sein.

Die Schlüsselwörter werden als Map von Argumentnamen als unquote Strings (ohne $) zu den Werten dieser Argumente zurückgegeben.

• SCSS
• Sass
• CSS

Spielplatz

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,
)

Spielplatz

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

pre 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

Gibt zurück, ob ein Mixin namens $name existiert.

Wenn $module null ist, wird zurückgegeben, ob ein Mixin namens $name ohne Namespace existiert. Andernfalls muss $module eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht. In diesem Fall wird zurückgegeben, ob dieses Modul ein Mixin namens $name hat.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";

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

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

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

Spielplatz

Sass-Syntax

@use "sass:meta"

@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

Kompatibilität

Dart Sass

seit 1.23.0

LibSass

✗

Ruby Sass

✗

➤

Gibt alle in einem Modul definierten Funktionen zurück, als Map von Funktionsnamen zu Funktionswerten.

Der Parameter $module muss eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht.

// _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

// _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-mixins($module) //=> map

Kompatibilität

Dart Sass

seit 1.69.0

LibSass

✗

Ruby Sass

✗

Gibt alle in einem Modul definierten Mixins zurück, als Map von Mixinnamen zu Mixinwerten.

Der Parameter $module muss eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht.

// _mixins.scss
@mixin stretch() {
  align-items: stretch;
  display: flex;
  flex-direction: row;
}

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

@use "mixins";

@debug meta.module-mixins("mixins"); // => ("stretch": get-mixin("stretch"))

.header {
  @include meta.apply(map.get(meta.module-mixins("mixins"), "stretch"));
}

// _mixins.scss
@mixin stretch()
  align-items: stretch
  display: flex
  flex-direction: row

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

@use "mixins"

@debug meta.module-mixins("mixins") // => ("stretch": get-mixin("stretch"))

.header
  @include meta.apply(map.get(meta.module-mixins("mixins"), "stretch"))

.header {
  align-items: stretch;
  display: flex;
  flex-direction: row;
}

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

Kompatibilität

Dart Sass

seit 1.23.0

LibSass

✗

Ruby Sass

✗

➤

Gibt alle in einem Modul definierten Variablen zurück, als Map von Variablennamen (ohne $) zu den Werten dieser Variablen.

Der Parameter $module muss eine Zeichenkette sein, die dem Namespace einer @use-Regel in der aktuellen Datei entspricht.

// _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
// )

// _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

Gibt den Typ von $value zurück.

Dies kann die folgenden Werte zurückgeben

• number
• string
• color
• list
• map
• calculation
• bool
• null
• function
• arglist

Neue mögliche Werte können in Zukunft hinzugefügt werden. Es kann entweder list oder map für () zurückgeben, abhängig davon, ob es von einer Map-Funktion zurückgegeben wurde oder nicht.

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use 'sass:meta';

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

Spielplatz

Sass-Syntax

@use 'sass:meta'

@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

Gibt zurück, ob eine Variable namens $name (ohne das $) im aktuellen Geltungsbereich existiert.

Siehe auch meta.global-variable-exists().

• SCSS
• Sass

Spielplatz

SCSS-Syntax

@use "sass:meta";

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

Spielplatz

Sass-Syntax

@use "sass:meta"

@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