sass:meta

混合

meta.load-css()

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

• 通过$url加载模块，并包含其 CSS，就好像它是作为这个 mixin 的内容编写的一样。如果$url是相对的，则将其解释为相对于meta.load-css()包含的文件。
• $with参数提供模块的配置；如果它被传递，它必须是从变量名（不含$）到要在加载的模块中使用的那些变量的值的映射。

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

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

功能

meta.calc-args()

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

返回给定计算的参数。如果参数是数字或嵌套计算，则以该类型返回。否则，它将作为不带引号的字符串返回。

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

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

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

meta.call()

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

调用$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"));
}

meta.content-exists()

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

返回当前的 mixin 是否被传递了一个@contentblock。如果在 mixin 之外调用，则会引发错误。

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

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

meta.feature-exists()

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

返回当前 Sass 实现是否支持$feature。$feature必须是字符串。目前公认的特点是：

• global-variable-shadowing，这意味着一个局部变量将隐藏一个全局变量，除非它有 boolean

  返回当前 Sass 实现是否支持$feature.

  $feature必须是字符串。目前公认的特点是：

  • global-variable-shadowing，这意味着一个局部变量将隐藏一个全局变量，除非它有!global标志。
  • extend-selector-pseudoclass，这意味着该@extend规则将影响嵌套在伪类中的选择器，例如:not().
  • units-level3，这意味着单位算术支持CSS Values and Units Level 3中定义的单位。
  • at-error，表示支持该@error规则。
  • custom-property，这意味着自定义属性声明值不支持除插值之外的任何表达式。

  返回false任何无法识别的$feature.

  @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与当前文件中[rule][]的命名空间匹配的字符串。

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

  
  

  
  

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

  返回名为（不带）的全局变量是否存在。$name$

  如果$module是null，则返回是否存在没有命名空间的变量$name。否则，$module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，这将返回该模块是否具有名为的变量$name。

  @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 版本或实现之间保持一致。

  @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 

  返回传递给接受任意参数的 mixin 或函数的关键字。$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,
  )
  

  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 

  返回名为mixin$name是否存在。

  如果$module是null，则返回是否存在一个没有命名空间的 mixin $name。否则，$module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，这将返回该模块是否具有名为的 mixin $name。

  @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 

  返回模块中定义的所有函数，作为从函数名称到函数值的映射。

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

  
  

  
  

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

  返回模块中定义的所有变量，作为从变量名称（不带$）到这些变量值的映射。

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

  
  

  
  

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

  返回的类型$value。

  这可以返回以下值：

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

  将来可能会添加新的可能值。它可能返回list或map返回()，这取决于它是否由map 函数返回。

  @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()。

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com