Sass 内置函数总结

作者： jcLee95

邮箱：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/123350343

本文总结了 Sass 为我们提供的自带函数，借鉴了bootstrap项目中的一些例子

☆ 关于本文中 SASS 与 SCSS 的说明

本文使用SCSS语法。

SASS与SCSS的主要区别在于：

Sass表示旧语法，Scss表示新语法；

新语法文件后缀为scss，旧语法文件后缀为sass；

新语法选择器的内容需要用一对大括号{}包裹，而旧语法使用缩进；

新语法使用分号（;）来分隔语句，而旧语法则使用换行符来分隔语句。

例如，这是一段SCSS语法：

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

其对应的Sass语法（就旧语法）为：

@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base
  @return $result
.sidebar
  float: left
  margin-left: pow(4, 3) * 1px

他们编译成CSS后的结果都为：

.sidebar {
 float: left;
 margin-left: 64px;
}

1. Sass 字符串相关函数

函数	描述
`quote`(string)	给字符串添加引号
`str-index`(string, substring)	返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null
`str-insert`(string, insert, index)	在字符串 string 中 index 位置插入 insert 的值
`str-length`(string)	返回字符串的长度
`str-slice`(string, start, end)	从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾
`to-lower-case`(string)	将字符串转成小写
`to-upper-case`(string)	将字符串转成大写
`unique-id`()	返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性
`unquote`(string)	移除字符串的引号

1.1 `quote`(string)

给字符串添加引号，例如：

// ...省略其它变量的定义
$breadcrumb-divider:                quote("/") !default;      // 给字符串添加引号
// 面包屑项
.breadcrumb-item {
  // 面包屑之间的分隔符 (默认情况下， 是一个正斜杠： "/")
  + .breadcrumb-item {
    padding-left: $breadcrumb-item-padding-x;
    &::before {
      float: left; // 取消分隔符的行内间距和下划线
      color: $breadcrumb-divider-color;
      // 确定给定元素的哪个基于页的出现应用于计数器或字符串值。
      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
    }
  }
  &.active {
    color: $breadcrumb-active-color;
  }
}

1.2 `str-index`(string, substring)

返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null，例如：

@function escape-svg($string) {
  @if str-index($string, "data:image/svg+xml") {
    @each $char, $encoded in $escaped-characters {
      // Do not escape the url brackets
      @if str-index($string, "url(") == 1 {
        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
      } @else {
        $string: str-replace($string, $char, $encoded);
      }
    }
  }
  @return $string;
}
.btn-close {
  box-sizing: content-box;
  width: $btn-close-width;
  height: $btn-close-height;
  padding: $btn-close-padding-y $btn-close-padding-x;
  color: $btn-close-color;
  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // 包括透明的按钮元素
  border: 0; // for button elements
  @include border-radius();
  opacity: $btn-close-opacity;
  // 覆盖 <a> 的 hover 样式
  &:hover {
    color: $btn-close-color;
    text-decoration: none;
    opacity: $btn-close-hover-opacity;
  }
  &:focus {
    outline: 0;
    box-shadow: $btn-close-focus-shadow;
    opacity: $btn-close-focus-opacity;
  }
  &:disabled,
  &.disabled {
    pointer-events: none;
    user-select: none;
    opacity: $btn-close-disabled-opacity;
  }
}

1.3 `str-insert`(string, insert, index)

在字符串 string 中 index 位置插入 insert，例如SCSS片段：

.box::after{
  content: str-insert("Hello Jack!", ", nice to meet you, ", 7);
}

编译为CSS后：

.box::after {
  content: "Hello , nice to meet you, Jack!"; }
/*# sourceMappingURL=test.css.map */

1.4 `str-length`(string)

在字符串 string 中 index 位置插入 insert，例如SCSS片段：

$sentence: "hello word";
.box{
  width: str-length($sentence)*2px;
}

编译为CSS后：

.box {
  width: 20px; }
/*# sourceMappingURL=test.css.map */

1.5 `str-slice`(string, start, end)

从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾，例如SCSS片段：

$paragraph: "In addition, a number of laws involving national security－including those on emergency response and management, public health emergency response and food security－will be formulated, while the Law on the Prevention and Control of Infectious Diseases and the Frontier Health and Quarantine Law will be revised, according to the annual work report of the Standing Committee of the National People's Congress.";
.box::after{
  content: str-slice($paragraph,4,11);
}

编译为CSS后：

.box::after {
  content: "addition"; }
/*# sourceMappingURL=test.css.map */

1.6 `to-lower-case`(string)

将字符串转成小写，例如SCSS片段：

$paragraph: "In addition, a number of laws involving national security－including those on emergency response and management, public health emergency response and food security－will be formulated, while the Law on the Prevention and Control of Infectious Diseases and the Frontier Health and Quarantine Law will be revised, according to the annual work report of the Standing Committee of the National People's Congress.";
.box::after{
  content: to-lower-case($paragraph);
}

编译为CSS后：

@charset "UTF-8";
.box::after {
  content: "in addition, a number of laws involving national security－including those on emergency response and management, public health emergency response and food security－will be formulated, while the law on the prevention and control of infectious diseases and the frontier health and quarantine law will be revised, according to the annual work report of the standing committee of the national people's congress."; }
/*# sourceMappingURL=test.css.map */

1.7 `to-upper-case`(string)

将字符串转成大写，例如SCSS片段：

$paragraph: "hello word!";
.box::after{
  content: to-upper-case($paragraph);
}

编译为CSS后：

.box::after {
  content: "HELLO WORD!"; }
/*# sourceMappingURL=test.css.map */

1.8 `unique-id`()

返回一个无引号的随机字符串作为 id。

只能保证在单次的 Sass 编译中确保这个 id 的唯一性！

例如SCSS片段：

.box::after{
  content: unique-id();
}

编译为CSS后：

.box::after {
  content: uosktobqp; }
/*# sourceMappingURL=test.css.map */

1.9 `unquote`(string)

移除字符串的引号，例如SCSS片段：

$paragraph: '"I love Jack!"';
.box::after{
  content: unquote($paragraph);
}

编译为CSS后：

.box::after {
  content: "I love Jack!"; }
/*# sourceMappingURL=test.css.map */

2. Sass 数字相关函数

函数	描述
`abs`(number)	返回一个数值的绝对值
`ceil`(number)	向上取整
`comparable`(num1, num2)	返回一个布尔值，判断 num1 与 num2 是否可以进行比较
`floor`(number)	向下取整
`max`(number…)	返回最大值
`min`(number…)	返回最小值
`percentage`(number)	将数字转化为百分比的表达形式
`random`()	返回 0-1 区间内的小数
`random`(number)	返回 1 至 number 之间的整数，包括 1 和 limit
`round`(number)	返回最接近该数的一个整数，四舍五入

2.1 `abs`(number)

返回一个数值的绝对值，例如：

abs(-6)      // 6
abs(6)       // 6

再如：

@function divide($dividend, $divisor, $precision: 10) {
  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
  $dividend: abs($dividend);
  $divisor: abs($divisor);
  @if $dividend == 0 {
    @return 0;
  }
  @if $divisor == 0 {
    @error "The divisor cannot be 0.";
  }
  $remainder: $dividend;
  $result: 0;
  $factor: 10;
  @while ($remainder > 0 and $precision >= 0) {
    $quotient: 0;
    @while ($remainder >= $divisor) {
      $remainder: $remainder - $divisor;
      $quotient: $quotient + 1;
    }
    $result: $result * 10 + $quotient;
    $factor: $factor * .1;
    $remainder: $remainder * 10;
    $precision: $precision - 1;
    @if ($precision < 0 and $remainder >= $divisor * 5) {
      $result: $result + 1;
    }
  }
  $result: $result * $factor * $sign;
  $dividend-unit: unit($dividend);
  $divisor-unit: unit($divisor);
  $unit-map: (
    "px": 1px,
    "rem": 1rem,
    "em": 1em,
    "%": 1%
  );
  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
    $result: $result * map-get($unit-map, $dividend-unit);
  }
  @return $result;
}

2.2 `ceil`(number)

向上取整，例如SCSS：

.box1{
  font-size: ceil(9.99)px;
}
.box2{
  font-size: ceil(0.01)px;
}

编译成CSS：

.box1 {
  font-size: 10 px; }
.box2 {
  font-size: 1 px; }
/*# sourceMappingURL=test.css.map */

2.3 `comparable`(num1, num2)

返回一个布尔值，判断 num1 与 num2 是否可以进行比较。

例如：

comparable(15px, 10px)      // true
comparable(20mm, 1cm)       // true
comparable(35px, 2em)       // false

又如：

@function add($value1, $value2, $return-calc: true) {
  // 如果第一个值为 null，则返回第二个值
  @if $value1 == null {
    @return $value2;
  }
  // 如果第二个值为 null，则返回第一个值
  @if $value2 == null {
    @return $value1;
  }
  // 如果两个都是数字，且是可比较数字（同样的单位类型如px），则相加后返回
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 + $value2;
  }
  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}

再如：

@function subtract($value1, $value2, $return-calc: true) {
  @if $value1 == null and $value2 == null {
    @return null;
  }
  @if $value1 == null {
    @return -$value2;
  }
  @if $value2 == null {
    @return $value1;
  }
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 - $value2;
  }
  @if type-of($value2) != number {
    $value2: unquote("(") + $value2 + unquote(")");
  }
  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

2.4 `floor`(number)

向下取整，例如：

floor(9.99)             // 9
floor(0.01)             // 0

2.5 `max`(number…)

获取最大值，例如：

max(9, 2, 7, -3, -6, 13)      // 9

2.6 `min`(number…)

获取最小值，例如：

min(9,3,6,4,7)      // 7

2.7 `percentage`(number)

将数字转化为百分比的表达形式。

percentage(.97)     // 97%

2.8 `random`()

随机返回一个 0-1 区间内的小数。例如：

random()     // 一个 0-1 之间的随机数如 0.8930708335

2.9 `random`(number)

随机返回 1 至 number 之间的整数，包括 1 和 limit。

2.10 `round`(number)

返回最接近该数的一个整数，四舍五入。例如：

round(9.01)   // 9
round(9.49)   // 9
round(9.50)   // 10

3. Sass 列表(List)相关函数

函数	描述
`append`(list, value, [separator])	将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格
`index`(list, value)	返回元素 value 在列表中的索引位置
`is-bracketed`(list)	判断列表中是否有中括号
`join`(list1, list2, [separator, bracketed])	合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false
`length`(list)	返回列表的长度
`list-separator`(list)	返回一列表的分隔符类型。可以是空格或逗号
`nth`(list, n)	获取第 n 项的值
`set-nth`(list, n, value)	设置列表第 n 项的值为 value
`zip`(lists)	将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表

3.1 `append`(list, value, [separator])

将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格，例如：

append((a b c), d)            // a b c d
append((a b c), (d), comma)   // a, b, c, d

又例如：

// 用0替换负值的辅助函数
@function valid-radius($radius) {
  $return: ();
  @each $value in $radius {
    @if type-of($value) == number {
      $return: append($return, max($value, 0));
    } @else {
      $return: append($return, $value);
    }
  }
  @return $return;
}

3.2 `index`(list, value)

返回元素 value 在列表中的索引位置，例如：

// 从 sass map 中获取多个键
@function map-get-multiple($map, $values) {
  $result: ();
  @each $key, $value in $map {
    @if (index($values, $key) != null) {
      $result: map-merge($result, ($key: $value));
    }
  }
  @return $result;
}

3.3 `is-bracketed`(list)

判断列表中是否有中括号，例如：

is-bracketed([a b c])  /* true */
is-bracketed(a b c)    /* flase */

3.4 `join`(list1, list2, [separator, bracketed])

合并两列表，将列表 list2 添加到列表 list1 的末尾。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。例如：

join(a b c, d e f)                    // a b c d e f
join((a b c), (d e f), comma)         // a, b, c, d, e, f
join(a b c, d e f, $bracketed: true)  // [a b c d e f]

3.5 `length`(list)

用于获取列表的长度，例如：

// 用于确保最低断点的最小宽度从0开始
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

3.6 `list-separator`(list)

返回一列表的分隔符类型，可以是空格或逗号，例如：

list-separator(a b c)     // "space"
list-separator(a, b, c)   // "comma"

3.7 `nth`(list, n)

用于获取列表第 n 项的值，例如：

// 用于确保最低断点的最小宽度从0开始。
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

3.8 `set-nth`(list, n, value)

设置列表第 n 项的值为 value，例如：

set-nth(a b c, 2, x)        // a x c

3.9 `zip`(lists)

将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。例如：

zip(1px 2px 3px, solid dashed dotted, red green blue)       // 1px solid red, 2px dashed green, 3px dotted blue

4. Sass 映射(Map)相关函数

函数	描述
`map-get`(map, key)	返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值
`map-has-key`(map, key)	判断 map 是否有对应的 key，存在返回 true，否则返回 false
`map-keys`(map)	返回 map 中所有的 key 组成的队列
`map-merge`(map1, map2)	合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
`map-remove`(map, keys…)	移除 map 中的 keys，多个 key 使用逗号隔开
`map-values`(map)	返回 map 中所有的 value 并生成一个队列

4.1 `map-get`(map, key)

返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值，例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small")                 // 12px

再如：

// 返回 WCAG2.0 相对亮度
@function luminance($color) {
  $rgb: (
    "r": red($color),
    "g": green($color),
    "b": blue($color)
  );
  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }
  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

4.2 `map-has-key`(map, key)

判断 map 是否有对应的 key，存在返回 true，否则返回 false。例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-has-key($font-sizes, "big")    // false

4.3 `map-keys`(map)

返回 map 中所有的 key 组成的队列。例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-keys($font-sizes)       // "small", "normal, "large"

4.4 `map-merge`(map1, map2)

合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部，例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
$font-sizes2: ("x-large": 30px, "xx-large": 36px)
map-merge($font-sizes, $font-sizes2)     // "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px

又如：

@function map-get-multiple($map, $values) {
  $result: ();
  @each $key, $value in $map {
    @if (index($values, $key) != null) {
      $result: map-merge($result, ($key: $value));
    }
  }
  @return $result;
}

4.5 `map-remove`(map, keys…)

移除 map 中的 keys，多个 key 使用逗号隔开。例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-remove($font-sizes, "small")            // ("normal": 18px, "large": 24px)
map-remove($font-sizes, "small", "large")   // ("normal": 18px)

4.6 `map-values`(map)

返回 map 中所有的 value 并生成一个队列。例如：

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-values($font-sizes)          // 12px, 18px, 24px

又如：

// 用于确保最低断点的最小宽度从0开始
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
  @if length($map) > 0 {
    $values: map-values($map);
    $first-value: nth($values, 1);
    @if $first-value != 0 {
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

5. Sass 选择器相关函数

函数	描述
`is-superselector`(super, sub)	比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false
`selector-append`(selectors)	将第二个 (也可以有多个) 添加到第一个选择器的后面
`selector-extend`(selector, extendee, extender)	与`@extend`规则一样扩展`$selector`。
`selector-nest`(selectors)	返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表
`selector-parse`(selector)	将字符串的选择符 selector 转换成选择器队列
`selector-replace`(selector, original, replacement)	给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列
`selector-unify`(selector1, selector2)	将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值
`simple-selectors`(selectors)	将合成选择器拆为单个选择器

5.1 `is-superselector`(super, sub)

比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。

例如：

is-superselector("div", "div.myInput")       // true
is-superselector("div.myInput", "div")       // false
is-superselector("div", "div")               // true

5.2 `selector-append`(selectors)

将第二个选择器 (也可以有多个) 添加到第一个选择器的后面。例如：

selector-append("div", ".myInput")      // div.myInput
selector-append(".warning", "__a")      //.warning__a

5.3 `selector-extend`(`$`selector, `$`extendee, `$`extender)

与@extend规则一样扩展$selector。

5.4 `selector-nest`(selectors)

返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。例如：

selector-nest("ul", "li")                      //ul li
selector-nest(".warning", "alert", "div")      // .warning div, alert div

5.5 `selector-parse`(selector)

将字符串的选择符 selector 转换成选择器队列。例如：

selector-parse("h1 .myInput .warning")           // ('h1' '.myInput' '.warning')

5.6 `selector-replace`(selector, original, replacement)

给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列。例如：

selector-replace("p.warning", "p", "div")      // div.warning

5.7 `selector-unify`(selector1, selector2)

将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值。例如：

selector-unify("myInput", ".disabled")      // myInput.disabled
selector-unify("p", "h1")                   // null

5.8 `simple-selectors`(selectors)

将合成选择器拆为单个选择器。

simple-selectors("div.myInput")             // div, .myInput
simple-selectors("div.myInput:before")      // div, .myInput, :before

6. Sass Introspection 相关函数

Sass Introspection 函数比较少用于构建样式表，一般用于代码的调试上。

函数	描述
`call`(function, arguments…)	函数的动态调用，即调用函数 function 参数为 arguments，并返回结果
`content-exists`()	查看当前的混入是否传递 @content 块
`feature-exists`(feature)	检查当前的 Sass 实现是否支持该特性
`function-exists`(functionname)	检测指定的函数是否存在
`get-function`(functionname, css: false)	返回指定函数。如果 css 为 true，则返回纯 CSS 函数
`global-variable-exists`(variablename)	检测某个全局变量是否定义
`inspect`(value)	返回一个字符串的表示形式，value 是一个 sass 表达式
`mixin-exists`(mixinname)	检测指定混入 (mixinname) 是否存在
`type-of`(value)	返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist
`unit`(number)	返回传入数字的单位（或复合单位）
`unitless`(number)	返回一个布尔值，判断传入的数字是否带有单位
`variable-exists`(variablename)	判断变量是否在当前的作用域下

7. Sass 颜色相关函数

7.1 Sass 颜色设置

函数	描述
`rgb`(red, green, blue)	创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色，而 G 是 “green” 绿色，B 是 “blue” 蓝色
`rgba`(red, green, blue, alpha)	根据红、绿、蓝和透明度值创建一个颜色
`hsl`(hue, saturation, lightness)	通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色
`hsla`(hue, saturation, lightness, alpha)	通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色
`grayscale`(color)	将一个颜色变成灰色，相当于 desaturate( color,100%)
`complement`(color)	返回一个补充色，相当于adjust-hue($color,180deg)
`invert`(color, weight)	返回一个反相色，红、绿、蓝色值倒过来，而透明度不变

7.1.1 `rgb`(red, green, blue)

创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色，而 G 是 “green” 绿色，B 是 “blue” 蓝色。例如：

rgb(0, 0, 255);

7.1.2 `rgba`(red, green, blue, alpha)

根据红、绿、蓝和透明度值创建一个颜色。

例如：

rgba(0, 0, 255, 0.3);

7.1.3 `hsl`(hue, saturation, lightness)

通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色，例如：

hsl(120, 100%, 50%); // 绿色
hsl(120, 100%, 75%); // 浅绿色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔和的绿色

再入scss：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); // 这里使用了 “关键词参数”
}

编译成的CSS为：

p {
  color: red; }
/*# sourceMappingURL=test.css.map */

7.1.4 `hsla`(hue, saturation, lightness, alpha)

通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。例如：

hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度

7.1.5 `grayscale`(color)

将一个颜色变成灰色，相当于 desaturate( color,100%)。例如：

grayscale(#7fffd4)            // #c6c6c6

7.1.6 `complement`(color)

返回一个补充色，相当于adjust-hue($color,180deg)。例如：

complement(#7fffd4)   // #ff7faa

7.1.7 `invert`(color, weight)

返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。例如：

invert(white)        // black

7.2 Sass 颜色获取

函数	描述
`red`(color)	从一个颜色中获取其中红色值（0-255）
`green`(color)	从一个颜色中获取其中绿色值（0-255）
`blue`(color)	从一个颜色中获取其中蓝色值（0-255）
`hue`(color)	返回颜色在 HSL 色值中的角度值 (0deg - 255deg)
`saturation`(color)	获取一个颜色的饱和度值(0% - 100%)
`lightness`(color)	获取一个颜色的亮度值(0% - 100%)
`alpha`(color)	以0到1之间的数字返回 color 的 alpha 通道
`opacity`(color)	获取颜色透明度值(0-1)

7.2.1 `red`(color)

从一个颜色中获取其中红色值（0-255）

7.2.2 `green`(color)

从一个颜色中获取其中绿色值（0-255）

7.2.3 `blue`(color)

从一个颜色中获取其中蓝色值（0-255）

7.2.4 `hue`(color)

返回颜色在 HSL 色值中的角度值 (0deg - 255deg)

7.2.5 `saturation`(color)

获取一个颜色的饱和度值(0% - 100%)

7.2.6 `lightness`(color)

获取一个颜色的亮度值(0% - 100%)

7.2.7 `alpha`(color)

以0到1之间的数字返回 color 的 alpha 通道

7.2.8 `opacity`(color)

获取颜色透明度值(0-1)

7.3 Sass 颜色操作

函数	描述
`mix`(color1, color2, weight)	把两种颜色混合起来。
`adjust-hue`(color, degrees)	通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色
`adjust-color`(color, red, green, blue, hue, saturation, lightness, alpha)	用于调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。
`change-color`(color, red, green, blue, hue, saturation, lightness, alpha)	与 `adjust-color` 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算
`scale-color`(color, red, green, blue, saturation, lightness, alpha)	另一种实用的颜色调节函数。 `adjust-color` 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 `scale-color` 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。
`desaturate`(color, amount)	调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 `adjust-color`(color, saturation: -amount)
`opacify`(color, amount)	降低颜色的透明度，取值在 0-1 之。等价于 `adjust-color(color, alpha: amount)`
`fade-in`(color, amount)	降低颜色的透明度，取值在 0-1 之。等价于 `adjust-color(color, alpha: amount)`
`transparentize`(color, amount)	提升颜色的透明度，取值在 0-1 之间。等价于 `adjust-color(color, alpha: -amount)`
`fade-out`(color, amount)	提升颜色的透明度，取值在 0-1 之间。等价于 `adjust-color(color, alpha: -amount)`

7.3.1 `mix`(color1, color2, weight)

把两种颜色混合起来。参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。

如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。

例如：

// 给一种颜色上色: 将一种颜色与白色混合
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}
// 给颜色加阴影:将一种颜色与黑色混合
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

7.3.2 `adjust-hue`(color, degrees)

通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。例如：

adjust-hue(#7fffd4, 80deg)         // #8080ff

7.3.3 `adjust-color`(color, red, green, blue, hue, saturation, lightness, alpha)

这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。

例如：

adjust-color(#6b717f, $red: 15)              // #7a717f

7.3.4 `change-color`(color, red, green, blue, hue, saturation, lightness, alpha)

跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。例如：

change-color(#7fffd4, red: 255)        // #ffffd4

7.3.5 `scale-color`(color, red, green, blue, saturation, lightness, alpha)

另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。

举个例子，一个颜色的亮度 lightness 取值在 0% ~ 100% 之间，假如执行 scale-color($color, $lightness: 40%)，表明该颜色的亮度将有 (100 - 原始值) × 40% 的增幅。

另一个例子，执行 scale-color($color, $lightness: -40%)，表明这个颜色的亮度将减少 (原始值 - 0) × 40% 这么多的值。

所有传参的取值范围都在 0% ~ 100% 之间，并且 RGB 同 HSL 的传参不能冲突。

例如：

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Sass 内置函数总结

Sass 内置函数总结

作者： jcLee95

邮箱 ：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/123350343

热门文章

最新文章

相关电子书

邮箱：291148484@163.com