SASS - 函数


  • SASS – 简介
  • SASS – 环境搭建
  • 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文档。

你可能感兴趣的:(SASS - 函数)