语法格式：scss （scss和sass可以互相导入也可以互相转换）sass官网
scss官网重点内容摘要
函数
（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限制在$min和$max之间。如果$number小于$min，则返回$min，如果大于$max，则返回$max。
$min， $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除以$number2的结果。
两个数共有的单位就消掉了。$number1中没有出现在$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是大于或等于1的数字，则返回1和$limit之间的随机整数。
@use 'sass:math';
@debug math.random(); // 0.2821251858
@debug math.random(); // 0.6221325814
@debug math.random(100px); // 42
（2）、内置函数-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的子字符串列表，这些子字符串由$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
（3）、内置函数-color模块（略）
（4）、内置函数-list模块
list.append
在Sass中，每个映射都是一个包含每个键/值对的双元素列表的列表。例如，(1:2,3:4)计数为(1 2,3 4)。所以所有这些函数也适用于映射!
单个值也算作列表。所有这些函数都将1px视为包含值1px的列表。
返回$list的副本，并在末尾添加$val。
当$separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与$list相同的分隔符(如果$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
（5）、内置函数-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
（6）、内置函数-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匹配的所有元素。
即使$super匹配的元素多于$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的副本，其中$original的所有实例都替换为$replacement。
它使用@extend规则的智能统一来确保$replacement被无缝地集成到$selector中。如果$selector不包含$original，则按原样返回。
$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和$selector2同时匹配的元素。
如果$selector1和$selector2不匹配任何相同的元素，或者没有选择器可以表示它们的重叠，则返回null。
与@extend规则生成的选择器一样，如果$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.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
（7）、内置函数-meta模块
Mixins 实用指数 ★★
meta.apply
包含带有$args的$mixin。如果传递给它一个@content块，它会被转发到$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的内容编写的一样。$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调用$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必须是一个字符串。目前公认的特征有:
全局变量遮蔽，这意味着局部变量将遮蔽全局变量，除非它带有!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的函数是否被定义为内置函数或用户定义函数。
如果传递了$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的函数值。
如果$module为空，这将返回名为$name的函数，但没有命名空间(包括全局内置函数)。否则，$module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回模块中名为$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，则返回当前模块中定义的名为$name的mixin。否则，$module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回名为$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
返回全局变量
n
a
m
e
(
不带
name(不带
name(不带)是否存在。
如果
m
o
d
u
l
e
为
n
u
l
l
，则返回一个名为
module为null，则返回一个名为
module为null，则返回一个名为name的变量是否存在，但没有命名空间。否则，
m
o
d
u
l
e
必须是与当前文件中
@
u
s
e
规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为
module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为
module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为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参数必须是一个参数列表。 关键字作为一个映射返回，从参数名作为未引号字符串(不包括 args参数必须是一个参数列表。关键字作为一个映射返回，从参数名作为未引号字符串(不包括)到这些参数的值。
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是否存在。 如果 name的mixin是否存在。如果module为null，则返回是否存在一个名为 n a m e 但没有命名空间的 m i x i n 。否则， name但没有命名空间的mixin。否则， name但没有命名空间的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
}
1958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
