SASS - 函数

Posted 2020-11-16 haibianren

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

本文介绍Sass函数。Sass包含大量函数，本文介绍最重要最常用的函数，其他可以参考官方文档。

颜色函数

sass包含很多操作颜色的函数。例如：lighten() 与 darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色。

下面是mix()函数例子:

div {
    padding: 20px;
    margin: 20px;
}
.one {
    background: red;
    }
.two {
    background: yellow;
}
.three {
    background: mix(red, yellow);
    }
.four {
    background: mix(red, yellow, 35%);
}
.five {
    background: mix(red, yellow, 65%);
}

经过编译输出以下CSS代码：

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

语法是mix($color1， $color2， [$weight])，可选的$weight参数设置$color1的权重，如果省略，则权重为50%。

字符串函数

Sass有许多处理字符串的函数，比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()。

数值函数

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

List 函数

List函数操作List，length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值。

Map 函数

Map函数操作Map，map-get()根据键值获取map中的对应值，map-merge()来将两个map合并成一个新的map，map-values()映射中的所有值。

选择符函数

选择符相关函数，例如：selector-append()可以把一个选择符附加到另一个选择符。

自检函数

自检相关函数，例如：feature-exists()检查当前Sass版本是否存在某个特性，variable-exists()检查当前作用域中是否存在某个变量，mixin-exists()检查某个mixin是否存在。

Sass函数的完整列表

还有许多其他函数，详情请参阅Sass文档。