首页 技术设计 前端 sass

# 1、基本定义

​ Sass 提供了许多内置模块，其中包含有用的函数 (以及偶尔的 mixin)。这些模块可以像任何用户定义的样式表一样用 @use 规则加载，它们的函数可以像任何其他模块成员一样被调用。所有内置模块 url 都以 sass: 开头，以表明它们是 sass 本身的一部分。
​ 在引入 Sass 模块系统之前，所有 Sass 功能在任何时候都是全局可用的。许多函数仍然有全局别名 (这些在它们的文档中列出)。Sass 团队不鼓励使用它们，并最终会弃用它们，但现在它们仍然可用，以兼容旧的 Sass 版本和 LibSass (它还不支持模块系统)。
​ 即使在新的模块系统中，一些函数也只能全局可用，要么是因为它们具有特殊的求值行为 (if ())，要么是因为它们在内置的 CSS 函数之上添加了额外的行为

Sass 提供以下内置模块:

  • math 模块提供了对数字进行操作的函数。
  • string 模块可以很容易地组合、搜索或拆分字符串。
  • color 模块基于现有的颜色生成新的颜色，使构建颜色主题变得容易。
  • list 模块允许您访问和修改列表中的值。
  • map 模块可以在映射中查找与键相关的值，以及更多。
  • selector 模块提供了对 sass 强大的选择器引擎的访问。
  • meta 模块公开了 sass 内部工作的细节。

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p { color: hsl(0, 100%, 50%); }
p { color: #ff0000; }

# 2、内置函数 - math 模块

截取可能有用的几个

# math.$pi

@use 'sass:math';
@debug math.$pi; // 3.1415926536

打印

# math.ceil（入）、math.floor（舍）、math.round（四舍五入）

@use 'sass:math';
@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5
@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4
@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5

# math.clamp

将number限制在number限制在 min 和max之间。如果max之间。如果 number 小于min，则返回min，则返回 min，如果大于max，则返回max，则返回 max。
$min， number和number和 max 必须有兼容的单位，或者都是无单位的。

// math.clamp($min, $number, $max) //=> number
@use 'sass:math';
@debug math.clamp(-1, 0, 1); // 0
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm

# math.max、math.min 取最大值、最小值

@use 'sass:math';
@debug math.max(1px, 4px); // 4px
$widths: 50px, 30px, 100px;
@debug math.max($widths...); // 100px

各种计算角度的值，用的时候再细研究吧

# math.div

返回number1除以number1除以 number2 的结果。
两个数共有的单位就消掉了。number1中没有出现在number1中没有出现在 number2 中的单位最终会出现在返回值的分子中，而number2中没有出现在number2中没有出现在 number1 中的单位最终会出现在其分母中。

// math.div($number1, $number2)
@use 'sass:math';
@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px
@debug math.div(100px, 5s); // 20px/s

# math.percentage

@use 'sass:math';
@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%

# math.random

如果limit为空，则返回0到1之间的随机十进制数。如果limit为空，则返回0到1之间的随机十进制数。如果 limit 是大于或等于 1 的数字，则返回 1 和 $limit 之间的随机整数。

@use 'sass:math';
@debug math.random(); // 0.2821251858
@debug math.random(); // 0.6221325814
@debug math.random(100px); // 42

# 3、内置函数 - string 模块

# string.quote 加引号

@use "sass:string";
@debug string.quote(Helvetica); // "Helvetica"
@debug string.quote("Helvetica"); // "Helvetica"

# string.index 取索引值

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11

# string.insert 插入值

@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
/* 如果 $index 大于 $string 的长度，则在末尾添加 $insert。如果 $index 小于字符串的负长度，则将 $insert 添加到开头。*/
@debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"

# string.length 获取长度

@debug string.length("Helvetica Neue"); // 14
@debug string.length(bold); // 4
@debug string.length(""); // 0

# string.slice 截取

@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"

# string.split 分割

返回string的子字符串列表，这些子字符串由string的子字符串列表，这些子字符串由 separator 分隔。这些子字符串中不包括分隔符。如果分隔符。 如果 limit 是 1 或更大的数字，则该函数最多分割两个分隔符(因此最多返回分隔符(因此最多返回 limit + 1 个字符串)。最后一个子字符串包含字符串的其余部分，包括所有剩余的 $ 分隔符。

@debug string.split("Segoe UI Emoji", " "); // ["Segoe", "UI", "Emoji"]
@debug string.split("Segoe UI Emoji", " ", $limit: 1); // ["Segoe", "UI Emoji"]

# string.to-upper-case、to-lower-case 转大小写

@debug string.to-upper-case("Bold"); // "BOLD"
@debug string.to-upper-case(sans-serif); // SANS-SERIF
@debug string.to-lower-case("Bold"); // "bold"
@debug string.to-lower-case(SANS-SERIF); // sans-serif

# 4、内置函数 - color 模块（略）

# 5、内置函数 - list 模块

# list.append

在 Sass 中，每个映射都是一个包含每个键 / 值对的双元素列表的列表。例如，(1:2,3:4) 计数为 (1 2,3 4)。所以所有这些函数也适用于映射！
单个值也算作列表。所有这些函数都将 1px 视为包含值 1px 的列表。
返回list的副本，并在末尾添加list的副本，并在末尾添加 val。
当separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与 list 相同的分隔符 (如果list没有分隔符，则使用空格)。其他值是不允许的。注意，与list.join()不同，如果list没有分隔符，则使用空格)。其他值是不允许的。 注意，与list.join()不同，如果 val 是一个列表，它将嵌套在返回的列表中，而不是将其所有元素添加到返回的列表中。

list.append($list, $val, $separator: auto)
@use 'sass:list';
@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((blue, red), green); // blue, red, green
@debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
@debug list.append(10px, 20px, $separator: comma); // 10px, 20px
@debug list.append((blue, red), green, $separator: space); // blue red green

# 其他（目前想不到他们的用途）

// 如果 \$value 没有出现在 $list 中，则返回 null。如果 \$value 在 \$list 中出现多次，则返回其第一次出现的索引。
index($list, $value) //=> number | null
@use 'sass:list';
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
// 返回 $list 是否有方括号。
list. is-bracketed($list) //=> boolean
@debug list.is-bracketed(1px 2px 3px); // false
@debug list.is-bracketed([1px, 2px, 3px]); // true
// 返回一个包含 $list1 元素和 $list2 元素的新列表。
list.join($list1, $list2, $separator: auto, $bracketed: auto)
@debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def)); // blue, red, #abc, #def
@debug list.join(10px, 20px); // 10px 20px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
@debug list.join([10px], 20px); // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true); // [10px 20px]
// 返回列表长度
list.length($list) //=> number
@debug list.length(10px); // 1
@debug list.length(10px 20px 30px); // 3
@debug list.length((width: 10px, height: 20px)); // 2
// 返回 $list 使用的分隔符的名称，可以是空格、逗号或斜杠。 如果 $list 没有分隔符，则返回空格。
list.separator($list) //=> unquoted string
@debug list.separator(1px 2px 3px); // space
@debug list.separator((1px, 2px, 3px)); // comma
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space
// 返回 $list 中索引为 $n 的元素。 如果 $n 为负，则从 $list 的末尾开始计数。如果索引 $n 处没有元素，则抛出错误。
list.set-nth($list, $n, $value)
@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug list.set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto
// 返回包含 $elements 的斜杠分隔列表。
list.slash($elements...) //=> list
@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px
/*
将 $lists 中的每个列表合并为一个由子列表组成的列表。
返回列表中的每个元素包含 $lists 中该位置的所有元素。返回的列表与 $lists 中最短的列表一样长。
返回的列表总是以逗号分隔，子列表总是以空格分隔。
*/
list.zip($lists...)  //=> list
@debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid); // 10px short, 50px mid
# 6、内置函数 - map 模块
# map.deep-merge
与 map.merge () 相同，只是嵌套的映射值也会递归合并。实用指数 ★
map.deep-merge($map1, $map2) //=> map
$helvetica-light: ( "weights": ( "lightest": 100, "light": 300 ) );
$helvetica-heavy: ( "weights": ( "medium": 500, "bold": 700 ) );
@debug map.deep-merge($helvetica-light, $helvetica-heavy);
// ( "weights": ( "lightest": 100, "light": 300,  "medium": 500, "bold": 700  ) )
@debug map.merge($helvetica-light, $helvetica-heavy);
// ( "weights": ( "medium: 500,  "bold": 700 ) )
# 其他
map.get($map, $key, $keys...)  // 查找深度嵌套映射
/* 如果 $keys 为空，则返回与 $key 关联的 $map 中的值。 如果 $map 没有与 $key 关联的值，则返回 null。 */
@use "sass:map"
$config: (a: (b: (c: d)))
@debug map.get($config, a, b, c) // d
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null
/* 如果 $keys 不为空，则从左到右依次查找包含 $key 但不包括 $keys 中的最后一个键的键集，以查找要搜索的嵌套映射。
返回目标映射中与 $keys 中最后一个键相关联的值。如果映射没有与键相关联的值，或者映射中缺少 $keys 中的任何键或引用的值不是映射，则返回 null。*/
$fonts: ( "Helvetica": ( "weights": ( "regular": 400, "medium": 500,  "bold": 700 ) ) );
@debug map.get($fonts, "Helvetica", "weights", "regular"); // 400
@debug map.get($fonts, "Helvetica", "colors"); // null
map.deep-remove($map, $key, $keys...) //=> map
/* 如果 $keys 为空，则返回 $map 的副本，但没有与 $key 关联的值。如果 $keys 不为空，则从左到右跟踪包含 $key 但不包括 $keys 中的最后一个键的键集，以查找要更新的嵌套映射。返回 $map 的副本，其中目标映射没有与 $keys 中最后一个键相关联的值 */
$fonts: ( "Helvetica": ( "weights": ( "regular": 400,  "medium": 500, "bold": 700 ) ) );
@debug map.deep-remove($fonts, "Helvetica", "weights", "regular");
// ( "Helvetica": ( "weights: ( "medium": 500, "bold": 700 ) ) )
map.has-key($map, $key, $keys...) //=> boolean
/* 如果 $keys 为空，则返回 $map 是否包含与 $key 相关的值。后面的逻辑与 map.get 一样 */
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.has-key($font-weights, "regular"); // true
@debug map.has-key($font-weights, "bolder"); // false
@debug map.has-key($fonts, "Helvetica", "weights", "regular"); // true
@debug map.has-key($fonts, "Helvetica", "colors"); // false
//map.keys ($map) 返回 $map 中所有键的逗号分隔列表。
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.keys($font-weights); // "regular", "medium", "bold"
/* map.merge($map1, $map2)    map.merge($map1, $keys..., $map2) //=> map */
/* 
在实践中，要映射的实际参数 map.merge ($map1, $keys..., $map2) 作为 map.merge ($map1, $args…) 传递。它们在这里被描述为 $map1， $keys…， $map2 仅作说明之用。 
如果没有传递 $keys，则返回一个包含 $map1 和 $map2 中所有键和值的新映射。
如果 $map1 和 $map2 具有相同的键，则 $map2 的值优先。
返回的映射中出现在 $map1 中的所有键的顺序与 $map1 中的顺序相同。来自 $map2 的新键出现在映射的末尾。
*/
$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);
@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)
/*
如果 $keys 不为空，则跟随 $keys 查找要合并的嵌套映射。如果 $keys 中的任何键在映射中缺失或引用了一个非映射的值，则将该键处的值设置为空映射。
返回 $map1 的副本，其中目标映射被一个包含目标映射和 $map2 中所有键和值的新映射所替换。
*/
$fonts: (
  "Helvetica": (
    "weights": (
      "lightest": 100,
      "light": 300
    )
  )
);
$heavy-weights: ("medium": 500, "bold": 700);
@debug map.merge($fonts, "Helvetica", "weights", $heavy-weights);
// (
//   "Helvetica": (
//     "weights": (
//       "lightest": 100,
//       "light": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )
/* 返回 $map 的副本，如果没有与 $keys 关联的任何值。 如果 $keys 中的一个键在 $map 中没有关联的值，它将被忽略。 */
// map.remove($map, $keys...)
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map.remove($font-weights, "regular", "bold"); // ("medium": 500)
@debug map.remove($font-weights, "bolder");  // ("regular": 400, "medium": 500, "bold": 700)
/*
在实践中，要映射的实际参数 map.set ($map, $keys..., $key, $value) 作为 map.set ($map, $args...) 传递。它们在这里被描述为 $map, $keys..., $key, $value 仅作说明之用。 
如果没有传递 $keys，则返回 $map 的副本，其中 $key 处的值设置为 $value。
*/
map.set($map, $key, $value)
map.set($map, $keys..., $key, $value) //=> map
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.set($font-weights, "regular", 300);
// ("regular": 300, "medium": 500, "bold": 700)
$fonts: ( "Helvetica": ( "weights": ( "regular": 400, "medium": 500, "bold": 700 ) ) );
@debug map.set($fonts, "Helvetica", "weights", "regular", 300);
// (
//   "Helvetica": (
//     "weights": (
//       "regular": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )
// 返回 $map 中所有值的逗号分隔列表。
map.values($map)
map-values($map) //=> list
$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.values($font-weights); // 400, 500, 700
# 7、内置函数 - selector 模块
这个模块中的函数检查和操作选择器。无论何时返回一个选择器，它总是一个逗号分隔的列表 (选择器列表)，其中包含空格分隔的列表 (复杂选择器)，其中包含未加引号的字符串 (复合选择器)。例如，选择器。 main aside:hover， .sidebar p 将被返回为:
@debug ((unquote(".main") unquote("aside:hover")),
        (unquote(".sidebar") unquote("p")));
// .main aside:hover, .sidebar p
这些函数的选择器参数可以采用相同的格式，但它们也可以只是普通字符串 (加引号或不加引号)，或者是组合。例如， .main aside:hover, .sidebar p 是一个有效的选择器参数。
返回选择器 $super 是否匹配选择器sub匹配的所有元素。即使‘sub匹配的所有元素。 即使`super 匹配的元素多于 sub‘，仍然返回true。sub`，仍然返回true。super 和 $sub 选择器可以包含占位符选择器，但不能包含父选择器。
selector.is-superselector($super, $sub)
is-superselector($super, $sub) //=> boolean
@use "sass:selector";
@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
@debug selector.is-superselector("a", "sidebar a"); // true
@debug selector.is-superselector("sidebar a", "a"); // false
@debug selector.is-superselector("a", "a"); // true
组合没有后代组合符的选择符——也就是说，它们之间没有空格。如果‘选择符——也就是说，它们之间没有空格。 如果`selectors 中的任何选择器是一个选择器列表，则每个复杂选择器将单独组合。 $selectors 可以包含占位符选择符，但不能包含父选择符。 参见 selector.nest ()`。
selector.append($selectors...)
selector-append($selectors...) //=> selector
@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image"); // .accordion__copy, .accordion__image
像 @extend 规则一样扩展 $selector 。 返回一个使用以下 @extend 规则修改过的 $selector 的副本:
换句话说，将 $selector 中的所有 $extendee 实例替换为 $extendee ， $extender 。如果 $selector 不包含 $extendee ，则按原样返回。
$selector 、 $extendee 和 $extender 选择符可以包含占位符选择符，但不包含父选择符。
参见 selector.replace() 。
selector.extend($selector, $extendee, $extender)
selector-extend($selector, $extendee, $extender) //=> selector
#{$extender} {
  @extend #{$extendee};
}
@debug selector.extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2"); // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar");
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar
嵌套 $selectors ，就像它们在样式表中彼此嵌套一样。
$selectors 可以包含占位符选择符。与其他选择器函数不同的是，除了第一个选择器之外，它们都可以包含父选择器。
selector.nest($selectors...)
selector-nest($selectors...) //=> selector
@debug selector.nest("ul", "li"); // ul li
@debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector.nest(".alert", "&:hover"); // .alert:hover
@debug selector.nest(".accordion", "&__copy"); // .accordion__copy
以选择器值格式返回 $selector。
@debug selector.parse(".main aside:hover, .sidebar p");
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))
返回selector的副本，其中selector的副本，其中 original 的所有实例都替换为 $replacement 。
它使用 @extend 规则的智能统一来确保replacement被无缝地集成到‘replacement被无缝地集成到`selector 中。如果 selector‘不包含‘selector`不包含`original ，则按原样返回。 selector‘、‘selector`、`original 和 $replacement 选择符可以包含占位符选择符，但不包含父选择符。 另请参见 selector.extend ()`。
selector.replace($selector, $original, $replacement)
selector-replace($selector, $original, $replacement) //=> selector
@debug selector.replace("a.disabled", "a", ".link"); // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2"); // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar");
// .guide .content nav.sidebar, .content .guide nav.sidebar
返回一个选择器，它只匹配与selector1和selector1和 selector2 同时匹配的元素。
如果selector1和selector1和 selector2 不匹配任何相同的元素，或者没有选择器可以表示它们的重叠，则返回 null。
与 @extend 规则生成的选择器一样，如果selector1和selector1和 selector2 都是复杂选择器，则返回的选择器不能保证匹配它们所匹配的所有元素。
@debug selector.unify("a", ".disabled"); // a.disabled
@debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector.unify("a", "h1"); // null
@debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a
返回selector中的简单选择器列表。selector中的简单选择器列表。selector 必须是一个包含复合选择器的字符串。这意味着它不能包含组合符 (包括空格) 或逗号。
返回的列表以逗号分隔，简单的选择器是未加引号的字符串。
selector.simple-selectors($selector)
simple-selectors($selector) //=> list
@debug selector.simple-selectors("a.disabled"); // a, .disabled
@debug selector.simple-selectors("main.blog:after"); // main, .blog, :after
# 8、内置函数 - meta 模块
# Mixins 实用指数 ★★
# meta.apply
包含带有args的args的 mixin。如果传递给它一个 @content 块，它会被转发到mixin。mixin。mixin 必须是一个 mixin 值，比如 meta.get-mixin() 返回的值。
meta.apply($mixin, $args...)
@use "sass:meta";
@use "sass:string";
// 将 $list 的每个元素传递给 $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);
# meta.load-css
在url处加载模块，并包括它的CSS，就像它是作为这个mixin的内容编写的一样。url处加载模块，并包括它的CSS，就像它是作为这个mixin的内容编写的一样。with 参数为模块提供配置；如果它被传递，它必须是一个从变量名 (不带)到要在加载模块中使用的变量值的映射。如果)到要在加载模块中使用的变量值的映射。 如果 url 是相对的，它被解释为相对于包含 meta.load-css () 的文件。
比如 @use 规则:
这将只计算给定模块一次，即使它以不同的方式加载了多次。
这不能为已经加载的模块提供配置
$url 参数应该是一个包含 url 的字符串，就像您传递给 @use 规则一样。它不应该是一个 CSS url ()!
meta.load-css($url, $with: null)
// 举例如下：
// 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));
}
# Functions
# meta.accepts-content
返回给定的 mixin 值是否可以接受 @content 块。
如果 mixin 可以接受 @content 块，则返回 true，即使它并不总是这样做。
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.call
使用args调用args调用 function 并返回结果。
$function 必须是一个函数值，例如 meta.get-function() 返回的值。
meta.call($function, $args...)
call($function, $args...)
@use "sass:list";
@use "sass:meta";
@use "sass:string";
/// 返回 $list 的副本，其中包含 $condition 返回 ' 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
返回当前 mixin 是否被传递了 @content 块。
如果在 mixin 外部调用，则抛出错误。
meta.content-exists()
content-exists() //=> boolean
@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
返回当前 Sass 实现是否支持feature。feature。feature 必须是一个字符串。目前公认的特征有:
全局变量遮蔽，这意味着局部变量将遮蔽全局变量，除非它带有！global 标志。
Extend-selector-pseudoclass，这意味着 @extend 规则将影响嵌套在伪类中的选择器，如:not ()。
units-level3，这意味着单位算法支持 CSS Values 和 units Level 3 中定义的单位。
At-error，这意味着支持 @error 规则。
custom-property，这意味着自定义属性声明值不支持除插值之外的任何表达式。
对于任何无法识别的 $ 特性返回 false。
@use "sass:meta";
@debug meta.feature-exists("at-error"); // true
@debug meta.feature-exists("unrecognized"); // false
# meta.function-exists
返回一个名为name的函数是否被定义为内置函数或用户定义函数。如果传递了name的函数是否被定义为内置函数或用户定义函数。 如果传递了 module，这也会检查名为module的模块是否有函数定义。module的模块是否有函数定义。module 必须是与当前文件中 @use 规则的命名空间匹配的字符串。
meta.function-exists($name, $module: null)
function-exists($name) //=> boolean
@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的函数值。如果name的函数值。 如果 module 为空，这将返回名为name的函数，但没有命名空间(包括全局内置函数)。否则，name的函数，但没有命名空间(包括全局内置函数)。否则，module 必须是与当前文件中 @use 规则的命名空间匹配的字符串，在这种情况下，它返回模块中名为name的函数。默认情况下，如果name的函数。 默认情况下，如果 name 没有引用 Sass 函数，就会抛出错误。但是，如果 $css 为 true，它将返回一个普通的 css 函数。
返回的 mixin 可以使用 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);
# meta.get-mixin
如果module为null，则返回当前模块中定义的名为module为null，则返回当前模块中定义的名为 name 的 mixin。否则，module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回名为module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回名为 name 的模块中的 mixin。
默认情况下，如果name没有引用mixin，就会抛出错误。但是，如果name没有引用mixin，就会抛出错误。但是，如果 css 为 true，它将返回一个普通的 css 函数。
可以使用 meta.call () 调用返回的函数。
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"));
}
# meta.global-variable-exists
返回全局变量 name (不带) 是否存在。
如果 m o d u l e 为 n u l l ，则返回一个名为 name 的变量是否存在，但没有命名空间。否则，m o d u l e 必须是与当前文件中 @ u s e 规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为 name 的变量。
参见 meta.variable-exists ()。
meta.global-variable-exists($name, $module: null)
global-variable-exists($name, $module: null) //=> boolean
@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 的字符串表示形式。
返回任何 Sass 值的表示形式，而不仅仅是那些可以在 CSS 中表示的值。因此，它的返回值不能保证是有效的 CSS。
此函数用于调试；它的输出格式不能保证跨 Sass 版本或实现保持一致。
meta.inspect($value)
inspect($value) //=> unquoted string
@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
返回传递给 mixin 或接受任意参数的函数的关键字。a r g s 参数必须是一个参数列表。关键字作为一个映射返回，从参数名作为未引号字符串 ( 不包括 args 参数必须是一个参数列表。 关键字作为一个映射返回，从参数名作为未引号字符串 (不包括 arg**s 参数必须是一个参数列表。关键字作为一个映射返回，从参数名作为未引号字符串 (不包括) 到这些参数的值。
meta.keywords($args)
keywords($args) //=> map
@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,
)
# meta.mixin-exists
返回一个名为 n a m e 的 m i x i n 是否存在。如果 name 的 mixin 是否存在。 如果 nam**e 的 mixin 是否存在。如果 module 为 null，则返回是否存在一个名为 n a m e 但没有命名空间的 m i x i n 。否则， name 但没有命名空间的 mixin。否则，nam**e 但没有命名空间的 mixin。否则，module 必须是与当前文件中 @use 规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为 $name 的 mixin。
@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 参数必须是与当前文件中 @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
# meta.module-mixins
返回模块中定义的所有 mixin，作为从 mixin 名称到 mixin 值的映射。
$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"));
}
# meta.module-variables
返回模块中定义的所有变量，作为从变量名 (不带)到这些变量值的映射。)到这些变量值的映射。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 的类型。
它可以返回以下值:
数字字符串颜色列表映射计算 bool 空函数 arglist
将来可能会添加新的可能值。它可以返回 list 或 map for ()，这取决于它是否是由 map 函数返回的。
meta.type-of($value)
type-of($value) //=> unquoted string
@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
meta.variable-exists($name)
variable-exists($name) //=> boolean
@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
}