- 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文档。
原文地址:https://www.cnblogs.com/haibianren/p/11595912.html