sass核心函数

lowMan
249 阅读14分钟

核心函数文档：sass-lang.com/documentati…

Sass提供了许多内置模块，其中包含有用的函数(以及偶尔的mixin)。这些模块可以像任何用户定义的样式表一样用@use规则加载，它们的函数可以像任何其他模块成员一样被调用。所有内置模块url都以sass:开头，以表明它们是sass本身的一部分。

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

Sass提供以下内置模块:

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

sass:color

color.adjust、color.scale、color.change

固定数量的增加或减少$color的1个或多个属性

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)

将传递给每个关键字参数的值添加到颜色的相应属性中，并返回调整后的颜色。将RGB属性(red，red， green, and/or blue)与HSL属性(blue)与HSL属性(hue， saturation,and/orsaturation, and/or lightness)同时指定，或者将这些属性与HWB属性(hue，hue， white, and/or $blackness)同时指定是错误的。

所有可选参数都必须是数字。red，red， green和blue参数必须是无单位的，并且在−255到255之间(包括)。blue参数必须是无单位的，并且在-255到255之间(包括)。hue参数必须有单位角度或者没有单位。saturation，saturation， lightness， whiteness和whiteness和blackness参数必须在-100%和100%(包括)之间，并且不能是无单位的。$alpha参数必须是无单位的，并且在-1到1(包括1)之间。

@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

adjust-hue(color,color, degrees)

增加或减少color的色调。color的色调。 hue必须是一个介于-360度和360度(包括)之间的数字，以添加到$color的色调。它可以是无单位的，但是除了度之外没有其他单位。

// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

获取颜色的透明度、三色通道、色调、饱和度、亮度、黑度

color.alpha($color)
alpha($color)
opacity($color) //=> number

color.red()用于获取颜色的红色通道。
color.green()用于获取颜色的绿色通道。
blue()用于获取颜色的蓝色通道。
color.hue()用于获取颜色的色调。
color.saturation()用于获取颜色的饱和度。
color.lightness()用于获取颜色的亮度。 color.blackness(color)用于获取颜色HWB黑度color.whiteness(color) 用于获取颜色 HWB黑度 color.whiteness(color) 用于获取颜色 HWB白度

@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)

@debug color.red(red); // 255
@debug green(red); // 0
@debug blue(red); // 0
@debug hue(red); // 0deg
@debug saturation(red); // 100%
@debug lightness(red); // 50%
@debug color.blackness(red); // 0%

获取颜色的RGB补码

color.complement($color)
complement($color) //=> color

这和color.adjust(color，color， hue: 180deg)是一样的。

// Hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b

// Hue 164deg becomes 344deg.
@debug color.complement(#d2e1dd); // #e1d2d6

// Hue 210deg becomes 30deg.
@debug color.complement(#036); // #663300

降低亮度

darken($color, $amount) //=> color

$amount取值为0%-100%

// #036的亮度为20%，所以当darkens()减去30%时，它只返回黑色。
@debug darken(#036, 30%); // black

// Scale()使它比原来的颜色暗30%。
@debug color.scale(#036, $lightness: -30%); // #002447

降低饱和度

desaturate($color, $amount) //=> color

$amount取值范围为0%-100%

// #d2e1dd的饱和度为20%，所以当desaturate()减去30%时，它只是返回灰色。
@debug desaturate(#d2e1dd, 30%); // #dadada
// Scale()反而使它的饱和度比原来低30%。
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c
// 饱和度100%变为80%。
@debug desaturate(#036, 20%); // #0a335c
// 饱和度35%变为15%。
@debug desaturate(#f2ece4, 20%); // #eeebe8
// 饱和度20%变为0%。
@debug desaturate(#d2e1dd, 30%); // #dadada

返回与$color亮度相同的灰色。

这和color.change(color,color, saturation: 0%)是一样的.

color.grayscale($color)
grayscale($color) //=> color

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(#d2e1dd); // #dadada
@debug color.grayscale(#036); // #333333

返回具有给定色相、白度和黑度以及给定alpha通道的颜色。

color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

@debug color.hwb(210, 0%, 60%); // #036
@debug color.hwb(34, 89%, 5%); // #f2ece4
@debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

#AARRGGBB格式表示$color

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

返回一个未加引号的字符串，它以Internet Explorer的-ms-filter属性所期望的#AARRGGBB格式表示$color。

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(#808c99); // #FF808C99
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

颜色取反(返回$color的倒数或负数)

权重必须是0%到100%(包括)之间的数字。较高的权重意味着结果将更接近于负数(相反的颜色)，较低的权重意味着它将更接近于$color。50%的权重总是会产生#808080。

@debug color.invert(#b37399); // #4c8c66
@debug color.invert(black); // white
@debug color.invert(#550e0c, 20%); // #663b3a

让颜色变浅(调整亮度)

必须是0%到100%(包括)之间的数字。将$color的HSL亮度增加相应的量。

// #e1d7d2的亮度为85%，所以当light()添加30%时，它只返回白色。
@debug lighten(#e1d7d2, 30%); // white
// Scale()使它比原来轻30%。
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

合成颜色(color1/color2)

color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%) //=> color

每种颜色的weight和相对不透明度都决定了每种颜色在结果中占多少。权重必须是0weight和相对不透明度都决定了每种颜色在结果中占多少。权重必须是0%到100%(包括)之间的数字。较大的权重表示应该使用更多的color1，较小的权重表示应该使用更多的$color2。

@debug color.mix(#036, #d2e1dd); // #698aa2
@debug color.mix(#036, #d2e1dd, 75%); // #355f84
@debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

改变颜色的透明度

opacify($color, $amount)
fade-in($color, $amount) //=> color

amount必须是介于0和1之间的数字(包括0和1)。将amount必须是介于0和1之间的数字(包括0和1)。将color的alpha通道增加该数量。

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

让颜色更饱和

color.saturate($color, $amount)
saturate($color, $amount) //=> color

amount必须是0amount必须是0%到100%(包括)之间的数字。增加color的HSL饱和度。

// 饱和度50%变为70%。
@debug saturate(#c69, 20%); // #e05299
// 饱和度35%变为85%。
@debug desaturate(#f2ece4, 50%); // #ebebeb
// 饱和度80%变为100%。
@debug saturate(#0e4982, 30%)  // #004990

让颜色更透明

transparentize($color, $amount)
fade-out($color, $amount) //=> color

amount必须是介于0和1之间的数字(包括0和1)。将amount必须是介于0和1之间的数字(包括0和1)。将color的alpha通道减少该数量。

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

$sass:list

向列表末尾添加元素

list.append($list, $val, $separator: auto)
append($list, $val, $separator: auto) //=> list

当separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与list相同的分隔符(如果$list没有分隔符，则使用空格)。其他值是不允许的。

comma：逗号、space：空格、slash：斜杠、auto：和列表的分隔符保持一致

注意，与list.join()不同，如果$val是一个列表，它将嵌套在返回的列表中，而不是将其所有元素添加到返回的列表中。

@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

查找索引

list.index($list, $value)
index($list, $value) //=> number | null

@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.is-bracketed($list)
is-bracketed($list) //=> boolean

@debug list.is-bracketed(1px 2px 3px); // false
@debug list.is-bracketed([1px, 2px, 3px]); // true

拼接两个列表

list.join($list1, $list2, $separator: auto, $bracketed: auto)
join($list1, $list2, $separator: auto, $bracketed: auto) //=> list

返回一个包含list1元素和list1元素和list2元素的新列表。

当separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与separator为“逗号”、“空格”或“斜杠”时，返回的列表分别以“逗号”、“空格”或“斜杠”分隔。如果它是auto(默认值)，返回的列表将使用与list1相同的分隔符(如果它有分隔符)，或者使用$list2(如果它有分隔符)，或者使用空格。其他值是不允许的。

如果bracked是auto(默认)，如果 bracked是auto(默认)，如果list1是，返回的列表将被括起来。否则，如果bracked为真，返回的列表将有方括号;如果 bracked为真，返回的列表将有方括号;如果 bracked为假，返回的列表将没有方括号。

@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)
length($list) //=> number

这也可以返回映射中对的数量。

@debug list.length(10px); // 1
@debug list.length(10px 20px 30px); // 3
@debug list.length((width: 10px, height: 20px)); // 2

获取列表分隔符名称

list.separator($list)
list-separator($list) //=> unquoted string

返回$list使用的分隔符的名称，space, comma, 或 slash.

@debug list.separator(1px 2px 3px); // space
@debug list.separator(1px, 2px, 3px); // comma
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space

根据索引查找元素

list.nth($list, $n)
nth($list, $n)

如果n为负，则从n为负，则从list的末尾开始计数。如果索引$n处没有元素，则抛出错误。

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

替换某个索引的元素

list.set-nth($list, $n, $value)
set-nth($list, $n, $value) //=> list

如果n为负，则从n为负，则从list的末尾开始计数。如果索引$n处没有存在的元素，则抛出错误。

@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

用斜杠分割列表

list.slash($elements...) //=> list

@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px

按索引合并列表

list.zip($lists...)
zip($lists...) //=> list

返回列表中的每个元素包含lists中该位置的所有元素。返回的列表与lists中该位置的所有元素。返回的列表与lists中最短的列表一样长。

返回的列表总是以逗号分隔，子列表总是以空格分隔。

@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

sass:map

深合并

与map.merge()相同，只是嵌套的映射值也会递归合并。

$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.deep-remove($map, $key, $keys...) //=> map

如果keys为空，则返回keys为空，则返回map的副本，但没有与$key关联的值。

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.deep-remove($font-weights, "regular");
// ("medium": 500, "bold": 700)

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.deep-remove($fonts, "Helvetica", "weights", "regular");
// (
//   "Helvetica": (
//     "weights: (
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

根据建获取值

map.get($map, $key, $keys...)
map-get($map, $key, $keys...)

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // 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

判断映射包含某个key

map.has-key($map, $key, $keys...)
map-has-key($map, $key, $keys...) //=> boolean

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.has-key($font-weights, "regular"); // true
@debug map.has-key($font-weights, "bolder"); // false

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.has-key($fonts, "Helvetica", "weights", "regular"); // true
@debug map.has-key($fonts, "Helvetica", "colors"); // false

返回映射的所有键构成的列表

map.keys($map)
map-keys($map) //=> list

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.keys($font-weights); // "regular", "medium", "bold"

合并两个映射

map.merge($map1, $map2)
map-merge($map1, $map2)
map.merge($map1, $keys..., $map2)
map-merge($map1, $keys..., $map2) //=> map

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

$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.remove($map, $keys...)
map-remove($map, $keys...) //=> map

$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, $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.values($map)
map-values($map) //=> list

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.values($font-weights); // 400, 500, 700

sass:math

math.$e

数学常数e最接近的64位浮点近似值。

@debug math.$e; // 2.7182818285

最小精度

math.$epsilon

根据浮点比较，1与大于1的最小64位浮点数之间的差值。由于Sass数的精度为10位，因此在许多情况下，这将显示为0。

最大值(64位最大有限数)

math.$max-number

@debug math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

最大整数

math.$max-safe-integer

@debug math.$max-safe-integer; // 9007199254740991

最小正数

math.$min-number

可以表示为64位浮点数的最小正数。由于Sass数的精度为10位，因此在许多情况下，这将显示为0。

最小整数

math.$min-safe-integer

@debug math.$min-safe-integer; // -9007199254740991

数学常数π

math.$pi

@debug math.$pi; // 3.1415926536

向上取整

math.ceil($number)
ceil($number) //=> number

@debug math.ceil(4); // 4
@debug math.ceil(4.2); // 5
@debug math.ceil(4.9); // 5

返回范围内的值

math.clamp($min, $number, $max) //=> number

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

@debug math.clamp(-1, 0, 1); // 0
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm

向下取整

math.floor($number)
floor($number) //=> number

@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4

返回数组的最大值

math.max($number...)
max($number...) //=> number

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

返回数组的最小值

math.min($number...)
min($number...) //=> number

@debug math.min(1px, 4px); // 1px
$widths: 50px, 30px, 100px;
@debug math.min($widths...); // 30px

四舍五入

math.round($number)
round($number) //=> number

@debug math.round(4); // 4
@debug math.round(4.2); // 4
@debug math.round(4.9); // 5

距离函数式

绝对值

math.abs($number)
abs($number) //=> number

@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px

n维向量的长度

math.hypot($number...) //=> number

返回n维向量的长度，该向量的分量等于每个$number。例如，对于三个数字a, b和c，这将返回a²+ b²+ c²的平方根。

这些数字要么都有兼容的单位，要么都是无单位的。由于数字的单位可能不同，因此输出采用第一个数字的单位。

@debug math.hypot(3, 4); // 5
$lengths: 1in, 10cm, 50px;
@debug math.hypot($lengths...); // 4.0952775683in

指数函数

对数

math.log($number, $base: null) //=> number

返回number相对于number相对于base的对数。如果$base为空，则计算自然对数。

@debug math.log(10); // 2.302585093
@debug math.log(10, 10); // 1
@debug math.log(100, 10); // 2

幂

math.pow($base, $exponent) //=> number

@debug math.pow(10, 2); // 100
@debug math.pow(100, math.div(1, 3)); // 4.6415888336
@debug math.pow(5, -2); // 0.04

平方根

math.sqrt($number) //=> number

@debug math.sqrt(100); // 10
@debug math.sqrt(math.div(1, 3)); // 0.5773502692
@debug math.sqrt(-1); // NaN

三角函数

余弦

math.cos($number) //=> number

number必须是一个角度(其单位必须与度兼容)或无单位。如果number必须是一个角度(其单位必须与度兼容)或无单位。如果number没有单位，则假定其单位为rad。

@debug math.cos(100deg); // -0.1736481777
@debug math.cos(1rad); // 0.5403023059
@debug math.cos(1); // 0.5403023059
@debug math.cos(math.$pi); // -1
@debug math.cos(90deg); // 0

正弦

math.sin($number) //=> number

@debug math.sin(100deg); // 0.984807753
@debug math.sin(1rad); // 0.8414709848
@debug math.sin(1); // 0.8414709848

正切

math.tan($number) //=> number

@debug math.tan(100deg); // -5.6712818196
@debug math.tan(1rad); // 1.5574077247
@debug math.tan(1); // 1.5574077247
@debug math.tan(45deg); // 1

反余弦

math.acos($number) //=> number

@debug math.acos(0.5); // 60deg
@debug math.acos(0); // 90deg
@debug math.acos(1); // 0deg
@debug math.acos(2); // NaNdeg

反正弦

math.asin($number) //=> number

@debug math.asin(0.5); // 30deg
@debug math.asin(2); // NaNdeg

2象限反正切

math.atan($number) //=> number

当number>0;取值范围是0 pi/2当number > 0;取值范围是 0 ~ pi/2 当number < 0;取值范围是 -pi/2 ~ 0

@debug math.atan(10); // 84.2894068625deg
@debug math.atan(1); // 45deg
@debug math.atan(-1); // -45deg

image.png

4象限反正切

math.atan2($y, $x) //=> number

数学。Atan2 (y，y， x)不同于atan(math. x)。Div (y，y， x))，因为它保留了所讨论点的象限。例如，数学。Atan2(1， -1)对应于点(- 1,1)并返回135度。相反，math.atan(数学)。Div(1， -1))和math.atan(数学。Div(- 1,1))首先解析为atan(-1)，因此都返回-45度。

@debug math.atan2(1, 1); // 45deg
@debug math.atan2(-1, 1); // -45deg
@debug math.atan2(-1, -1); // -135deg
@debug math.atan2(1, -1); // 135deg
@debug math.atan2(0, -1); // 180deg
@debug math.atan2(0, 0); // 0deg

单位函数

判断是否有兼容单位

如果返回true，则可以安全地对number1和number1和number2进行加法、减法和比较。否则，这样做将产生错误。

math.compatible($number1, $number2)
comparable($number1, $number2) //=> boolean

@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.compatible(10cm, 3mm); // true

判断是否没有单位

math.is-unitless($number)
unitless($number) //=> boolean

@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false

返回单位

math.unit($number)
unit($number) //=> quoted string

@debug math.unit(100); // ""
@debug math.unit(100px); // "px"
@debug math.unit(5px * 10px); // "px*px"
@debug math.unit(math.div(5px, 1s)); // "px/s"

其它函数

除法

math.div($number1, $number2) //=> number

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

@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

转换成百分比

将无单位的$number(通常是0到1之间的小数)转换为百分比。

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

随机数

math.random($limit: null)
random($limit: null) //=> number

如果$limit为空，则返回0到1之间的随机十进制数。

@debug math.random(10); // 4
@debug math.random(10000); // 5373

sass:meta

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

在url处加载模块，并包括它的CSS，就像它是作为这个mixin的内容编写的一样。url处加载模块，并包括它的CSS，就像它是作为这个mixin的内容编写的一样。with参数为模块提供配置;如果它被传递，它必须是一个从变量名(不带$)到要在加载模块中使用的变量值的映射。

如果$url是相对的，它被解释为相对于包含meta.load-css()的文件。

$url参数应该是一个包含url的字符串，就像您传递给@use规则一样。它不应该是一个CSS 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));
}

返回给定计算的参数

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($calc) //=> quoted string

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

call

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

使用args调用args调用function并返回结果。
$function应该是一个由meta.get-function()返回的函数。

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

判断当前mixin是否被传递了@content块

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

如果在mixin外部调用，则抛出错误。

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

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

判断当前Sass实现是否支持$feature

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

$feature必须是一个字符串。目前公认的特征有:

  • 全局变量遮蔽，这意味着局部变量将遮蔽全局变量，除非它带有!global标志。
  • Extend-selector-pseudoclass，这意味着@extend规则将影响嵌套在伪类中的选择器，如:not()。
  • units-level3，这意味着单位算法支持CSS Values和units Level 3中定义的单位。
  • At-error，这意味着支持@error规则。 这意味着自定义属性声明值不支持除插值之外的任何表达式。
@debug meta.feature-exists("at-error"); // true
@debug meta.feature-exists("unrecognized"); // false

判断函数是否被定义

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

如果传递了module，这也会检查名为module，这也会检查名为module的模块是否有函数定义。$module必须是与当前文件中@use规则的命名空间匹配的字符串。

@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

返回名为$name的函数

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

如果module为空，这将返回名为module为空，这将返回名为name的函数，但没有命名空间(包括全局内置函数)。否则，module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回模块中名为module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回模块中名为name的函数。

默认情况下，如果name没有引用Sass函数，就会抛出错误。但是，如果name没有引用Sass函数，就会抛出错误。但是，如果css为true，它将返回一个普通的css函数。

可以使用meta.call()调用返回的函数。

@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.global-variable-exists($name, $module: null)
global-variable-exists($name, $module: null) //=> boolean

如果module为null，则返回一个名为module为null，则返回一个名为name的变量是否存在，但没有命名空间。否则，module必须是与当前文件中@use规则的命名空间匹配的字符串，在这种情况下，它返回该模块是否有一个名为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
}

返回$value的字符串表示形式。

meta.inspect($value)
inspect($value) //=> unquoted string

返回任何Sass值的表示形式，而不仅仅是那些可以在CSS中表示的值。因此，它的返回值不能保证是有效的CSS。

@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参数必须是一个参数列表 关键字作为一个映射返回，从参数名作为未引号字符串(不包括args参数必须是一个参数列表\ 关键字作为一个映射返回，从参数名作为未引号字符串(不包括)到这些参数的值。

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

判断mixin是否存在

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

@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规则的命名空间匹配的字符串。

@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

返回模块中定义的所有变量(映射)

$module参数必须是与当前文件中@use规则的命名空间匹配的字符串。

@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

它可以返回以下值:

@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

参见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
}

sass:selector

这个模块中的函数检查和操作选择器。无论何时返回一个选择器，它总是一个逗号分隔的列表(选择器列表)，其中包含空格分隔的列表(复杂选择器)，其中包含未加引号的字符串(复合选择器)。例如，选择器。main aside:hover， .sidebar p将被返回为:

@debug ((unquote(".main") unquote("aside:hover")),
        (unquote(".sidebar") unquote("p")));
// .main aside:hover, .sidebar p

返回选择器super是否匹配选择器super是否匹配选择器sub匹配的所有元素。

selector.is-superselector($super, $sub)
is-superselector($super, $sub) //=> boolean

即使super匹配的元素多于super匹配的元素多于sub，仍然返回true。
super和super和sub选择器可以包含占位符选择器，但不能包含父选择器。

@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

拼接选择器

selector.append($selectors...)
selector-append($selectors...) //=> selector

如果selectors中的任何选择器是一个选择器列表，则每个复杂选择器将单独组合。 selectors中的任何选择器是一个选择器列表，则每个复杂选择器将单独组合。\ selectors可以包含占位符选择符，但不能包含父选择符。
参见selector.nest()。

@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image");
// .accordion__copy, .accordion__image

拓展选择器

selector.extend($selector, $extendee, $extender)
selector-extend($selector, $extendee, $extender) //=> selector

像@extend规则一样扩展$selector

返回一个使用以下@extend规则修改过的$selector的副本:

#{$extender} {
  @extend #{$extendee};
}

换句话说，将selector中的所有selector中的所有extendee实例替换为extendee，extendee， extender。如果selector不包含selector不包含extendee，则按原样返回。

selector、selector、extendee和$extender选择符可以包含占位符选择符，但不包含父选择符。

参见selector.replace()。

@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

组合选择器

selector.nest($selectors...)
selector-nest($selectors...) //=> selector

组合选择器，就像它们在样式表中彼此嵌套一样。
$selectors可以包含占位符选择符。与其他选择器函数不同的是，除了第一个选择器之外，它们都可以包含父选择器。
参见selector.append()。

@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.parse($selector)
selector-parse($selector) //=> selector

以选择器值格式返回$selector。

@debug selector.parse(".main aside:hover, .sidebar p");
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))

选择器替换

selector.replace($selector, $original, $replacement)
selector-replace($selector, $original, $replacement) //=> selector

返回selector的副本，其中selector的副本，其中original的所有实例都替换为replacement。 它使用@extend规则的智能统一来确保replacement。\ 它使用@extend规则的智能统一来确保replacement被无缝地集成到selector中。如果selector中。如果selector不包含$original，则按原样返回。

selector、selector、original和$replacement选择符可以包含占位符选择符，但不包含父选择符。、 另请参见selector.extend()。

@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

返回同时匹配两个选择器的选择器

selector.unify($selector1, $selector2)
selector-unify($selector1, $selector2) //=> selector | null

返回一个选择器，它只匹配与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.simple-selectors($selector)
simple-selectors($selector) //=> list

返回$selector中的简单选择器列表。

$selector必须是一个包含复合选择器的字符串。这意味着它不能包含组合符(包括空格)或逗号。

返回的列表以逗号分隔，简单的选择器是未加引号的字符串。

@debug selector.simple-selectors("a.disabled"); // a, .disabled
@debug selector.simple-selectors("main.blog:after"); // main, .blog, :after

sass:string

加引号

string.quote($string)
quote($string) //=> string

返回$string作为引号字符串。

@debug string.quote(Helvetica); // "Helvetica"
@debug string.quote("Helvetica"); // "Helvetica"

查找子字符串在字符串中的索引

string.index($string, $substring)
str-index($string, $substring) //=> number

返回string中string中substring的第一个索引，如果string不包含string不包含substring则返回null。(索引从1开始)

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

在索引处插入字符串

string.insert($string, $insert, $index)
str-insert($string, $insert, $index) //=> string

返回string的副本，并在string的副本，并在index处插入$insert。

@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"

如果index大于index大于string的长度，则在末尾添加insert。如果insert。如果index小于字符串的负长度，则将$insert添加到开头。

@debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"

获取字符串长度

string.length($string)
str-length($string) //=> number

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

切割字符串

string.slice($string, $start-at, $end-at: -1)
str-slice($string, $start-at, $end-at: -1) //=> string

返回string的切片，从索引string的切片，从索引start-at开始，到索引$end-at结束(包括两个)。

@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: null) //=> list

返回string的子字符串列表，这些子字符串由string的子字符串列表，这些子字符串由separator分隔。这些子字符串中不包括$分隔符。

如果limit是1或更大的数字，则该函数最多分割两个limit是1或更大的数字，则该函数最多分割两个分隔符(因此最多返回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($string)
to-upper-case($string) //=> string

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

转小写

string.to-lower-case($string)
to-lower-case($string) //=> string

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

生成唯一标识符

string.unique-id()
unique-id() //=> string

去除字符串双引号

string.unquote($string)
unquote($string) //=> string
avatar
文章
阅读
粉丝