sass:meta

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

Совместимость:

Dart Sass

с версии 1.69.0

LibSass

✗

Ruby Sass

✗

Включает $mixin с $args. Если этому передаётся @content блок, он пересылается в $mixin.

$mixin должен быть значением миксина, например, таким, который возвращается meta.get-mixin().

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

// SASS
@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 */
.font-8px {
  font-size: 8px;
}

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

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

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

Совместимость:

Dart Sass

с версии 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

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

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

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

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

В отличие от @use:

• Это не делает доступными члены загруженного модуля в текущем модуле.

• Это может использоваться в любом месте в стилевом листе. Оно может даже быть вложенным в правила стиля для создания вложенных стилей!

• Загружаемый модуль URL может быть из переменной и содержать интерполяцию.

// 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
// dark-theme/_code.sass
$border-contrast: false !default

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

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

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

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

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

Совместимость:

Dart Sass

с версии 1.69.0

LibSass

✗

Ruby Sass

✗

Возвращает, может ли заданное значение миксина принимать @content блок.

Это возвращает true, если для миксина возможно принять @content блок, даже если он не всегда это делает.

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

Совместимость:

Dart Sass

с версии 1.40.0

LibSass

✗

Ruby Sass

✗

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

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

@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

// SASS
@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

Совместимость:

Dart Sass

с версии 1.40.0

LibSass

✗

Ruby Sass

✗

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

@use 'sass:meta';

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

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

Совместимость (тип аргумента):

Dart Sass

✓

LibSass

с версии 3.5.0

Ruby Sass

с версии 3.5.0

➤

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

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

@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"));
}

// SASS
@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 */
.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

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

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

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

@use 'sass:meta';

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

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

// SASS
@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

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

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

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

Возвращает false для любых нераспознанных $feature.

@use "sass:meta";

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

// SASS
@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

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

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

@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

// SASS
@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

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

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

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

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

@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"));
}

// SASS
@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 */
.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

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

Совместимость:

Dart Sass

с версии 1.69.0

LibSass

✗

Ruby Sass

✗

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

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

По умолчанию, это вызывает ошибку, если $name не относится к миксину.

Возвращённый миксин можно включить с помощью meta.apply().

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

// SASS
@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 */
.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

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

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

См. также meta.variable-exists().

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

// SASS
@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

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

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

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

// SASS
@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

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

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

@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
@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 */
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

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

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

@use "sass:meta";

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

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

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

// SASS
@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

Совместимость:

Dart Sass

с версии 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

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

// _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
// _functions.sass
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result

// SASS
@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

Совместимость:

Dart Sass

с версии 1.69.0

LibSass

✗

Ruby Sass

✗

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

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

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

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

// SASS
@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"))

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

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

Совместимость:

Dart Sass

с версии 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

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

// _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
// _variables.sass
$hopbush: #c69
$midnight-blue: #036
$wafer: #e1d7d2

// SASS
@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.

Возвращаемые значения:

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

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

@use 'sass:meta';

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

// SASS
@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

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

См. также meta.global-variable-exists().

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

// SASS
@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