sass 常见函数

常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modules

Color(颜色函数)

sass 包含很多操作颜色的函数。例如：

• lighten() 与 darken()函数可用于调亮或调暗颜色
• opacify()函数使颜色透明度减少
• transparent()函数使颜色透明度增加
• mix()函数可用来混合两种颜色

例如：

p {
  height: 30px;
}
.p0 {
  background-color: #5c7a29;
}
.p1 {
  /*
让颜色变亮
lighten($color, $amount)
$amount 的取值在 0% - 100% 之间
*/
  background-color: lighten(#5c7a29, 30%);
}
.p2 {
  // 让颜色变暗 通常使用 color.scale()代替该方案
  background-color: darken(#5c7a29, 15%);
}
.p3 {
  // 降低颜色透明度 通常使用 color.scale()代替该方案
  // background-color: opacify(#5c7a29,0.5);
  background-color: opacify(rgba(#5c7a29, 0.1), 0.5);
}

TIP

更多颜色函数：https://sass-lang.com/documentation/modules/color

String（字符串函数）

Sass 有许多处理字符串的函数，比如

• quote() 向字符串添加引号的
• string-length() 获取字符串长度的
• string-insert() 将内容插入字符串给定位置

p {
  &:after {
    content: quote(这是里面的内容);
  }
  background-color: unquote($string: "#F00");
  z-index: str-length("sass 学习");
}

Math(数值函数)

数值函数处理数值计算，例如：

• percentage() 将无单元的数值转换为百分比
• round() 将数字四舍五入为最接近的整数
• min() 和 max() 获取几个数字中的最小值或最大值
• random() 返回一个随机数。

p {
  z-index: abs($number: -15); // 15
  z-index: ceil(5.8); //6
  z-index: max(5, 1, 6, 8, 3); //8
  opacity: random(); // 随机 0-1
}

List 函数

List 函数操作 List

• length() 返回列表长度
• nth() 返回列表中的特定项
• join() 将两个列表连接在一起
• append() 在列表末尾添加一个值

p {
  z-index: length(12px); //1
  z-index: length(12px 5px 8px); //3
  z-index: index(a b c d, c); //3
  padding: append(10px 20px, 30px); // 10px 20px 30px
  color: nth($list: red blue green, $n: 2); // blue
}

Map 函数

Map 函数操作 Map

• map-get() 根据键值获取 map 中的对应值
• map-merge() 来将两个 map 合并成一个新的 map
• map-values() 映射中的所有值

$font-sizes: (
  "small": 12px,
  "normal": 18px,
  "large": 24px,
);
$padding: (
  top: 10px,
  right: 20px,
  bottom: 10px,
  left: 30px,
);
p {
  font-size: map-get($font-sizes, "normal"); //18px
  @if map-has-key($padding, "right") {
    padding-right: map-get($padding, "right");
  }
  &:after {
    content: map-keys($font-sizes) + " " + map-values($padding) + "";
  }
}

selector 选择器函数

选择符相关函数可对 CSS 选择进行一些相应的操作，例如：

• selector-append() 可以把一个选择符附加到另一个选择符
• selector-unify() 将两组选择器合成一个复合选择器

自检函数

自检相关函数，例如：

• feature-exists()检查当前 Sass 版本是否存在某个特性
• variable-exists() 检查当前作用域中是否存在某个变量
• mixin-exists() 检查某个 mixin 是否存在

自检函数通常用在代码的调试上