Sass 中的值Sass 中的值一共有9种，分别为数字、字符串、颜色、数组、对象、布尔值、空值、计算、函数。字符串

Sass 中的值一共有9种，分别为 数字、字符串、颜色、数组、对象、布尔值、空值、计算、函数。

字符串

与 js 索引不同，sass 中字符串的索引从 1 开始，另外，sass 中也可以负号表示倒数的索引，例如 -1 指的是字符串中的最后一个字符，-2 指的是倒数第二个。

@use "sass:string";

@debug string.index("Helvetica Neue", "H"); // 1
@debug string.index("Helvetica Neue", "N"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"

数组

数组的索引也是从 1 开始，负号也可以表示倒数的索引，例如 -1 表示最后一个元素，-2 表示倒数第二个元素。

数组中常见的操作：

获取数组中的某个元素：list.nth($list, $index) ，$list 为数组，$index 为索引，返回数组对应位置的元素。（索引超过数组长度会报错）
```
@debug list.nth(10px 12px 14px, 2); // 12px
@debug list.nth([1, 2, 3], -1); // 3
```

添加元素到数组：list.append($list, $value)，$list 为数组，$value 为添加的元素，返回添加元素后的数组。

@debug list.append(10px 12px 14px, 20px); // 10px 12px 14px 20px
@debug list.append(10px 12px 14px, 20px 22px); // 10px 12px 14px (20px 22px)

查找数组中某个元素：list.index($list, $value) ， $list 为数组，$value 为查找的元素，返回元素对应的索引。(查找不到返回 null)
```
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, dashed); // null
```

由于 sass 中的数组是不可变 的，所以对数组进行操作的各个方法返回的数组都是原数组的副本，并没有改变原数组。当然，也可以通过重定义的方法改变原数组。

参数列表

声明一个接受任意参数的 mixin 或 function 时，得到的值称为参数列表。除了有以下一个额外的功能，它与数组完全类似：如果传递了关键字参数，可以将其视为 map 结构传递给 meta.keywords() 函数。

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

对象

对象必须包裹在 () 中。

对象中常用的操作：

查找属性值：map.get($map, $key) ，根据 key 查找对应的值，返回对象上对应的值，找不到返回 null

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

@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null

设置属性的值：map.set($map, $key, $value) ，向 $map 对象中设置 $key 属性，值为 $value ，返回设置后的对象（由于对象的不可变，该操作不会改变原对象）

@use "sass:map";

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

@debug map.set($font-weights, "extra-bold", 900);
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)
@debug map.set($font-weights, "bold", 900);
// ("regular": 400, "medium": 500, "bold": 900)

合并对象：map.merge($map1, $map2, $map...) ，将两个已存在的对象 $map1 、 $map2 、$map.. 合并。（后边对象属性如果与前边对象的属性重复，将使用后边对象的属性值。同样由于对象的不可变，该操作不会改变原对象）

与数组一样，sass 中的对象也是不可变的，操作对象的各个方法返回的对象都是原对象的副本。当然，也可以通过重定义的方法改变原对象。

真假值

使用布尔操作可以输出新的布尔值：

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true

@if 可以控制语句的执行与否：

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

if() 函数接收3个参数，第一个参数为一个布尔值，第二个参数跟第三个参数为一个值，布尔值为 true 时函数返回第二个值，布尔值为 false 时返回第三个值：

@debug if(true, 10px, 20px); // 10px
@debug if(false, 10px, 20px); // 20px

注意：sass中只把 false 和 null 当为假值，其余（如 0,""）都为真值