sass:meta

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

В настоящее время только Dart Sass поддерживает загрузку встроенных модулей с помощью @use. Пользователи других реализаций должны вместо этого вызывать функции, используя их глобальные имена.

Миксины permalinkМиксины

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

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

Только Dart Sass в настоящее время поддерживает этот миксин.

Загружает модуль по адресу $url и включает его CSS, как если бы он был написан как содержимое этого миксина. Параметр $with предоставляет конфигурацию для модулей; если он передан, это должна быть карта между именами переменных (без $) и значениями этих переменных для использования в загруженном модуле.

Если $url является относительным, он интерпретируется как относительный к файлу, в который включен meta.load-css().

Как правило @use:

Это будет оценивать данный модуль только один раз, даже если он загружен несколько раз разными способами.
Это не может предоставить конфигурацию для модуля, который уже был загружен, независимо от того, был ли он уже загружен с конфигурацией.

В отличие отправила @use:

Это не делает какие-либо члены загруженного модуля доступными в текущем модуле.
Это можно использовать в любом месте таблицы стилей. Его можно даже вложить в правила стиля для создания вложенных стилей!
URL загружаемого модуля может быть получен из переменной и включать интерполяцию.

⚠️ Внимание!

Параметр $url должен быть строкой, содержащей URL-адрес, аналогичный тому, который вы передаете правилу @use. Это не должен быть URL-адрес CSS url()!

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

Функции permalinkФункции

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

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

Возвращает аргументы для данного вычисления.

Если аргумент является числом или вложенным вычислением, он возвращается как этот тип. В противном случае он возвращается как строка без кавычек.

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

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

Возвращает имя данного вычисления.

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

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

В более старых версиях LibSass и Ruby Sass функция call() function принимала строку, представляющую имя функции. Это было изменено, чтобы вместо этого принимать значение функции при подготовке к новой модульной системе, где функции больше не являются глобальными, и поэтому данное имя не всегда может относиться к одной и той же функции.

Передача строки в call() по-прежнему работает во всех реализациях, но она устарела и будет запрещена в будущих версиях.

Вызывает $function с $args и возвращает результат.

$function должна быть функцией, возвращаемой meta.get-function().

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

/// Вернуть копию $list со всеми удаленными элементами, для которых $condition возвращает `true`.
@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"

/// Вернуть копию $list со всеми удаленными элементами, для которых $condition возвращает `true`.
@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

Возвращает, был ли текущий миксин передан блоком @content block.

Выдает ошибку, если вызывается вне примеси.

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

Возвращает, поддерживает ли текущая реализация Sass $feature.

$feature должна быть строкой. Признанные в настоящее время функции:

global-variable-shadowing, что означает, что локальная переменная будет затенять глобальную переменную, если у нее нет флага !global.
extend-selector-pseudoclass, что означает, что правило @extend будет влиять на селекторы, вложенные в псевдоклассы, такие как :not().
units-level3, что означает, что арифметика единиц измерения поддерживает единицы измерения, определенные в Значения и единицы измерения CSS Уровень 3.
at-error, что означает, что поддерживается правило @error.
custom-property, что означает, что значения объявления настраиваемого свойства не поддерживают никаких выражений, кроме .

Возвращает false для любой нераспознанной функции $feature.

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

Возвращает, определена ли функция с именем $name, либо как встроенная, либо как определяемая пользователем функция.

Если передан $module, это также проверяет модуль с именем $module на предмет определения функции. $module должен быть строкой, соответствующей пространству имен [правила @use][@use rule] в текущем файле.

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

Возвращает функцию с именем $name.

Если $module равен null, это возвращает функцию с именем $name без пространства имен (включая глобальные встроенные функции). В противном случае $module должен быть строкой, соответствующей пространству имен правила @use в текущем файле, и в этом случае возвращается функция в этом модуле с именем $name.

По умолчанию это вызывает ошибку, если $name не относится к функции Sass. Однако, если $css имеет значение true, вместо этого возвращается простая функция CSS.

Возвращенная функция может быть вызвана с помощью meta.call().

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

/// Вернуть копию $list со всеми удаленными элементами, для которых $condition возвращает `true`.
@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"

/// Вернуть копию $list со всеми удаленными элементами, для которых $condition возвращает `true`.
@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

Возвращает, существует ли глобальная переменная с именем $name (без $).

Если $module равен null, это возвращает, существует ли переменная с именем $name без пространства имен. В противном случае, $module должен быть строкой, соответствующей пространству имен правила @use в текущем файле, и в этом случае возвращается, имеет ли этот модуль переменную с именем $name.

Смотрите также 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

Возвращает строковое представление $value.

Возвращает представление любого значения Sass, а не только тех, которые могут быть представлены в CSS. Таким образом, не гарантируется, что его возвращаемое значение является действительным CSS.

⚠️ Внимание!

Эта функция предназначена для отладки; его выходной формат не гарантирует единообразия для разных версий или реализаций 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

Возвращает ключевые слова, переданные в миксин или функцию, которая принимает произвольные аргументы. Аргумент $args должен быть списком аргументов.

Ключевые слова возвращаются в виде сопоставления имен аргументов в виде строк без кавычек (не включая $) со значениями этих аргументов.

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

Возвращает, существует ли миксин с именем $name.

Если $module равен null, это возвращает, существует ли миксин с именем $name без пространства имен. В противном случае, $module должен быть строкой, соответствующей пространству имен правила @use в текущем файле, и в этом случае возвращается, имеет ли этот модуль миксин с именем $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

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

В настоящее время только Dart Sass поддерживает эту функцию.

Возвращает все функции, определенные в модуле, в виде сопоставления имен функций с значениями функций.

Параметр $module должен быть строкой, соответствующей пространству имен правила @use в текущем файле.

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-variables("functions"), "pow"), 3, 4); // 16
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-variables("functions"), "pow"), 3, 4) // 16

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

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

В настоящее время только Dart Sass поддерживает эту функцию.

Возвращает все переменные, определенные в модуле, в виде сопоставления имен переменных (без $) со значениями этих переменных.

Параметр $module должен быть строкой, соответствующей пространству имен правила @use в текущем файле.

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

Возвращает тип $value.

Это может вернуть следующие значения:

В будущем могут быть добавлены новые возможные значения. Он может возвращать либо list, либо map для (), в зависимости от того, был ли он возвращен функцией карты.

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

Возвращает, существует ли переменная с именем $name (без $) в текущей области.

Смотрите также 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