常见函数简介,更多函数列表可看:https://sass-lang.com/documentation/modules
1.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);
}
使用
例
p {
&:after {
content: quote(这是里面的内容);
}
background-color: unquote($string: “#F00”);
z-index:str-length(“sass学习”);
}
3.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
}
4.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
}
5.Map函数
Map函数操作Map,map-get()根据键值获取map中的对应值,map-merge()来将两个map合并成一个新的map,map-values()映射中的所有值。
$font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …-size: map-get(font-sizes, “normal”); //18px
@if map-has-key(KaTeX parse error: Expected '}', got 'EOF' at end of input: …right: map-get(padding, “right”);
}
&:after {
content: map-keys(
f
o
n
t
−
s
i
z
e
s
)
+
"
"
+
m
a
p
−
v
a
l
u
e
s
(
font-sizes) + " "+ map-values(
font−sizes)+""+map−values(padding) + “”;
}
}
6.selector选择器函数
选择符相关函数可对CSS选择进行一些相应的操作,例如:selector-append()可以把一个选择符附加到另一个选择符,selector-unify()将两组选择器合成一个复合选择器。
例如
.header {
background-color: #000;
content: selector-append(“.a”, “.b”, “.c”) + ‘’;
content: selector-unify(“a”, “.disabled”) + ‘’;
}
7.自检函数
自检相关函数,例如:feature-exists()检查当前Sass版本是否存在某个特性,variable-exists()检查当前作用域中是否存在某个变量,mixin-exists()检查某个mixin是否存在。
例如
KaTeX parse error: Expected 'EOF', got '#' at position 7: color:#̲F00; @mixin pad…left:0, $top:0, $right:0, $bottom:0) {
padding: $top $right $bottom $left;
}
.container {
@if variable-exists(color) {
color: KaTeX parse error: Expected 'EOF', got '}' at position 12: color; }̲ @else { …color不存在";
}
@if mixin-exists(padding) {
@include padding($left: 10px, $right: 10px);
}
}