函数库
函数库包含了许多函数,这一切有以下九种:
① 其它函数;
② 字符串函数;
③ 长度相关函数;
④ 数学函数;
⑤ 类型函数;
⑥ 颜色值定义函数;
⑦ 颜色值通道提取函数;
⑧ 颜色值运算函数;
⑨ 颜色混合函数
一、其它函数
Color()函数
解析颜色,将代表颜色的字符串转换为十六进制的颜色值。
body{
background:color(“#f60”)
}
编译后的css:
body {
background:#ff6600;
}
Convert()函数
将数字从一种类型转换到另一种类型。
body{
width:convert(20cm,px);
}
编译后的css:
body{
width:755.90551181px;
}
Data-uri()函数
将一个资源内嵌到样式文件,如果开启了ieconmpat选项,而且资源文件的体积过大,或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。
body{ background:data-uri(‘arr.jpg’); }
Default()函数
只能边界条件使用,没有匹配到其他自定义函数(mixin)的时候返回true,否则返回false。
.x(1) { x:11 }
.x(2) { y:22 }
.x(@x) when (default()) {z:@x}
.div1{
.x(1)
}
.div2{
.x(123)
}
编译后的css:
.div1{ x:11; }
.div2{ z:123;}
Unit()函数
移除或者改变属性值的单位。
div{
width: unit(100px);
height: unit(200,px)
}
编译后的css:
div {
width: 100;
height: 200px;
}
二、字符串函数
escape()函数
将输入字符串的url特殊字符进行编码处理;
不转义的编码:, , / , ? , @ , & , + , ‘ , ~ . ! , $
转义的编码:# , ^ ( , ) { , } , | , ; . , : , > , < , = , [ , ]
div{
d:escape(‘123=abc’);
}
编译后的css:
div {
d: 123%3Dabc;
}
e()函数
css转义,用~“值”符号代替。
Css就会原文输出,也就是避免编译;
div{
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
编译后的css:
div {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
%()函数
函数%(string, arguments…)格式化一个字符串。
在这里面有6个值,也就是占位符:a A d D s S,它们的含义也不同
D , d, a, A能被任何类型参数替换(颜色值,数字,转义值,表达式……),如果你在字符串中结合使用,整个字符串参数都会替换进去,包括他的引号,然后引号会被替换到字符串参数的原有位置,也许会被转义或者还是不变,取决于占位符是大写字母还是小写字母。
S , s 能被除了颜色值以外的任何类型参数替换,如果你在字符串中结合使用,只会替换程字符串参数的值。
replace()函数
用另一个字符串替换文本
div{
aaa:replace( "HELLO,maizi", "maizi", "LESS" )
}
编译后的css:
div {
aaa: "HELLO,LESS";
}
长度相关函数
length()函数
返回集合中的条数。
div {
length:length(1px solid #0080ff);
}
编译后的css:
div {
length: 3;
}
extract()函数
返回集合中指定索引的值。
@list:"banana","tomato","peach";
div {
aaa:extract(@list,1)
}
编译后的css:
div {
aaa: "banana";
}
数学函数
1).向上取整:ceil()
2).向下取整:floor()
3).将浮点数转换为百分比:percentage()
4).取整和四舍五入:round()
5).计算一个数的平方根,原样保持单位:sqrt()
6).计算数字的绝对值,原样保持单位:abs()
7).正弦函数:sin()
8).反正弦函数:asin()
9).余弦函数:cos()
10).反余弦函数:acos()
11).正切函数:tan()
12).反正切函数:atan()
13).返回π(pi):pi()
14).乘方运算:pow()
15).取余运算:mod()
16).最小值运算:min()
17).最大值运算:max()
这个并不是很难理解,需要自己多去练习,熟能生巧。
类型函数
类型相关函数一共有9个:
1).如果一个值是一个数字,返回真(true),否者返回(false):isnumber();
2).如果一个只是一个字符串,返回真(true),否者返回(false):isstring();
3).如果一个值是一个颜色,返回真(true),否者返回(false):iscolor();
4).如果一个值是一个关键字,返回真(true),否者返回(false):iskeyword();
5).如果一个值是一个url地址,返回真(true),否者返回(false):isurl();
6).如果一个值是带像素长度单位的数字,返回真(true),否者返回(false):ispixel();
7).如果一个值是带em长度单位的数字,返回真(true),否者返回(false):isem();
8).如果一个值是带百分比单位的数字,返回真(true),否者返回(false):ispercentage();
9).如果一个值是带指定单位的数字,返回真(true),否者返回(false):isunit();
.mix(@x) when (isnumber(@x)) {
number: @x;
}
.mix(@x) when (isstring(@x)) {
string: @x;
}
.mix(@x) when (iscolor(@x)) {
color: @x;
}
.mix(@x) when (iskeyword(@x)) {
keyword: @x;
}
.mix(@x) when (ispixel(@x)) {
pixel: @x;
}
.mix(@x) when (isem(@x)) {
em: @x;
}
.mix(@x) when (isurl(@x)) {
url: @x;
}
.mix(@x) when (ispercentage(@x)) {
percentage: @x;
}
.mix(@x) when (isunit(@x,cm)) {
cm:@x;
}
.div{
.mix(222);
.mix("string");
.mix("#333");
.mix(ABC);
.mix(220px);
.mix(3em);
.mix(url("1.jpg"));
.mix(20%);
.mix(34cm);
}
编译后的css:
.div {
number: 222;
string: "string";
string: "#333";
keyword: ABC;
number: 220px;
pixel: 220px;
number: 3em;
em: 3em;
url: url("1.jpg");
number: 20%;
percentage: 20%;
number: 34cm;
cm: 34cm;
}
颜色值定义函数
1).通过十进制红色,绿色,蓝色三种值(RGB)创建不透明的颜色对象:rgb();
2).通过十进制红色,绿色,蓝色,以及alpha四种植(RGBA)创建带alpha透明的颜色对象:rgba();
3).创建格式为#AARRGGBB的十六进制(hex representation)颜色(注意不是#RRGGBBAA ! ):argb();
4). 通过色相(hue),饱和度(saturation),亮度(lightness)三种值创建不透明的颜色对象:hls();
5).通过色相(hue),饱和度(saturation),亮度(lightness),以及alpha四种值(HSLA)创建透明的颜色对象:hsla();
6). 通过色相(hue),饱和度(saturation),色调(value)三种值(HSV)创建不透明的颜色对象:hsv();
7).通过色相(hue),饱和度(saturation),色调(value),以及alpha四种值创建透明的颜色对象:hsva();
//通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象。
div{
background: rgb(255,0,0);
background: rgb(100%,0%,0%);
}
//通过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
div{
background: rgba(255,0,0,0.5);
background: rgba(100%,0%,0%,0.5);
}
//创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。
div{
background: argb(rgba(255,0,0,0.5));
background: argb(rgba(100%,0%,0%,0.5));
}
//通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。
div{
background: hsl(90,100%,50%);
}
//通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建透明的颜色对象。
div{
background: hsla(90,100%,50%,0.5);
}
//通过色相 (hue),饱和度 (saturation),色调 (value) 三种值 (HSV) 创建不透明的颜色对象。
div{
background: hsv(90,100%,50%);
}
//通过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 创建透明的颜色对象。
div{
background: hsva(90,100%,50%,8%);
}
编译后的css:
div {
background: #ff0000;
}
div {
background: rgba(255, 0, 0, 0.5);
}
div {
background: #80ff0000;
}
div {
background: #80ff00;
}
div {
background: rgba(128, 255, 0, 0.5);
}
div {
background: #408000;
}
div {
background: rgba(64, 128, 0, 0.08);
}
颜色值通道提取函数
1).从HSL色彩空间中提取颜色对象的色相值:hue();
2). 从HSL色彩空间中提取颜色对象的饱和度值:saturation();
3). 从HSL色彩空间中提取颜色对象的亮度值:lightness();
4). 从HSV色彩空间中提取颜色对象的色相值:hsvhue();
5). 从HSV色彩空间中提取颜色对象的饱和度值:hsvsaturation();
6). 从色彩空间中提取颜色对象的色调值:hsvvalue();
7). 提取颜色对象的红色值:red();
8). 提取颜色对象的绿色值:gree();
9). 提取颜色对象的蓝色值:blue();
10). 提取颜色对象的透明值:alpha();
11).计算颜色对象的luma的值(亮度的百分比表示方法):lima()
12).计算没有伽玛校正的亮度值:luminance();
颜色值运算函数
1).增加一定数值的颜色饱和度:saturate();
2).降低一定数值的颜色饱和度:desaturate();
3).增加一定数值的颜色亮度:lighten();
4).降低一定数值的颜色亮度:darken();
5).降低颜色的透明度(或增加不透明度),令其更不透明:fadein();
6).增加颜色的透明度(或降低不透明的),令其更透明:fadeout();
7).给颜色(包括不透明的颜色)设定一定数值的透明度:fade();
8).任意方向旋转颜色的色相角度(hue angle):spin();
9).根据比例混合两种颜色,包括计算不透明度:mix();
10).完全移除颜色的饱和度,与desaturate(@colo,100%)函数效果相同:greyscale();
11).选着两种颜色相比较,得出那种颜色的对比度最大就倾向于对比度最大的颜色:contrast();
body{
c:hsl(90,80%,50%);
c:saturate(hsl(90,80%,50%),20%);
}
div{
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1{
background: hsl(90,80%,50%);
}
.ys2{
background: saturate(hsl(90,80%,50%),20%);
}
.ys3{
background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{
background: lighten(hsl(90,80%,50%),20%);
}
.ys5{
background: darken(hsl(90,80%,50%),20%);
}
.ys66{
background:hsla(90,80%,50%,50%);
}
.ys6{
background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{
background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{
background: hsl(90,80%,50%);
}
.ys9{
background: fade(hsl(90,80%,50%),40%);
}
.ys10{
background: hsl(10,90%,50%);
}
.ys11{
background: spin(hsl(0,90%,50%),360);
}
.ys12{
background: rgba(100,50,20,0.5);
}
.ys13{
background: rgba(0,150,120,0.2);
}
.ys14{
background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{
background: hsl(90,100%,50%);
}
.ys16{
background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}
编译后的css:
body {
c: #80e619;
c: #80ff00;
}
div {
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1 {
background: #80e619;
}
.ys2 {
background: #80ff00;
}
.ys3 {
background: #80cc33;
}
.ys4 {
background: #b3f075;
}
.ys5 {
background: #4d8a0f;
}
.ys66 {
background: rgba(128, 230, 25, 0.5);
}
.ys6 {
background: #80e619;
}
.ys7 {
background: rgba(128, 230, 25, 0.1);
}
.ys8 {
background: #80e619;
}
.ys9 {
background: rgba(128, 230, 25, 0.4);
}
.ys10 {
background: #f2330d;
}
.ys11 {
background: #f20d0d;
}
.ys12 {
background: rgba(100, 50, 20, 0.5);
}
.ys13 {
background: rgba(0, 150, 120, 0.2);
}
.ys14 {
background: rgba(65, 85, 55, 0.35);
}
.ys15 {
background: #80ff00;
}
.ys16 {
background: #ffffff;
}
颜色混和函数
1).分别将两种颜色的红绿蓝(RGB)三种值做乘法运算,然后在除以255,输出结果是更深的颜色(译注:对应Photoshop中的“变暗/正片叠底”):multiply();
2).与multiply()函数效果相反,输出结果是更亮的颜色。(对应Photoshop中的“变亮/滤色”):screen();
3).结合multiply()与screen()两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(对应Photoshop中的“叠加”)注意:输出结果由第一个颜色参数决定:overlay();
4).与overlay()函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。(对应Photoshop中的“柔光 ”):softlight();
5).与overlay()函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。(对应Photoshop中的:强光/亮光.线性光/点光):hardlight();
6).从第一个颜色值中间去第二个(分别计算RGB三种颜色值),输出结果是更深的颜色(对应Photoshop中的“差值/排除”):differene();
7).效果与difference()函数效果相似,只是输出结果差别更小(lowr contrast)(对应Photoshop中的“差值/排除”):exclusion();
8).分别对RGB的三种颜色值取平均值,然后输出结果:average();
9).与difference()函数效果相反,输出结果是更亮的颜色。请注意:效果相反不代表做加法运算:negation();