LESS函数总结

LESS函数总结

        • 3.1 String函数系列
          • 3.1.1 escape(@string)编码
          • 3.1.2 e(@string)转义
          • 3.1.3 %(string,arguments...)格式化字符串
          • 3.1.4 Replace替换
        • 3.2 list函数系列
          • 3.2.1 length函数
          • 3.2.2 extract函数
        • 3.3 Math函数系列
          • 3.3.1 ceil
          • 3.3.2 floor
          • 3.3.3 percentage
          • 3.3.4 round
          • 3.3.5 sqrt(number)
          • 3.3.6 abs(number)
          • 3.3.7 pow(@base,@exponet)
          • 3.3.8 mod(number1,number2)
        • 3.4 Type函数系列
          • 3.4.1 Isnumber
          • 3.4.2 Isstring
          • 3.4.3 iscolor
          • 3.4.5 iskeyword
          • 3.4.6 isurl
          • 3.4.7 ispixel
          • 3.4.8 isem
          • 3.4.9 ispercentage
          • 3.4.10 isunit
        • 3.5 其他杂项函数
          • 3.5.1 color函数
          • 3.5.2 convert
          • 3.5.3 data-uri
          • 3.5.4 default
          • 3.6 unit
        • 3.6 color函数系列
          • 3.6.1 rgb(@red,@green,@blue)
          • 3.6.2 lightness(@color)
          • 3.6.3 red(@color)
          • 3.6.4 green(@color)
          • 3.6.5 blue(@color)
          • 3.6.6 alpha(@color)
          • 3.6.7 lighten(@color,10%)
          • 3.6.8 darken(@color,10%)
          • 3.6.9 fadein(@color,10%)
          • 3.6.10 fadeout(@color,10%)
          • 3.6.11 fade(@color,10%)
        • 3.7 函数运算
      • 4.导入

3.1 String函数系列
3.1.1 escape(@string)编码

使用URL-encoding的方式编码字符串。常用于对url中出现= \ / ; ^等字符进行编码。

如果参数是字母表中26个字母,大小写均可,或者是数字,则原样返回。

@myurl: escape('a1');
#header {
  background-image: url(@myurl);
}

// 编译之后的结果为:
#header {
  background-image: url(a1);
}

但是除此之外,其他字符也不一定都会被编码

不会被编码的字符:/ ? @ & + ' ~ ! $

常见的被编码的字符串:# ^ ( ) { } | : > < ; [ ] =

@myurl: escape("a=1&b>3+1");
#header {
  background-image: url(@myurl);
}

// 编译之后的结果为:
#header {
  background-image: url(a%3D1&b%3E3+1);
}
3.1.2 e(@string)转义

用于对CSS的转义,与之前媒体查询定义变量的方式中使用~"value"类似。其接收一个字符串作为参数,并原样返回内容(不含字符串的两边的引号)。可用于输出一些不合法的CSS语法,或者是使用LESS不能识别的属性。这样使得不会报错,虽然输出样式和原来的没有区别,但是具体的内容被进行了处理。

@myurl: e("a=1&b>3+1");
#header {
  background-image: url(@myurl);
}

// 编译之后的结果
#header {
  background-image: url(a=1&b>3+1);
}
3.1.3 %(string,arguments…)格式化字符串

类似于C语言输出函数printf格式化一样,此处也可以通过占位符进行格式化。含义一致

#header {
  width: %('%dpx',300);
  height: %('%dpx',300);
  background-color: #00f;
}

// 编译之后的结果为:
#header {
  width: '300px';
  height: '300px';
  background-color: #00f;
}

需要注意的是,该函数返回格式化的字符串,带有' ',这样就会导致以上编译之后的属性值失效

解决方法:使用e(@string)函数进行转义,去除引号

#header {
  width: e(%('%dpx',300));
  height: e(%('%dpx',300));
  background-color: #00f;
}
// 编译之后的结果为:
#header {
  width: 300px;
  height: 300px;
  background-color: #00f;
}
3.1.4 Replace替换

用另一个字符串替换文本

参数:

  • string: 搜索和替换用的字符串
  • pattern: 一个字符串或者能搜索的正则表达式
  • replacement:匹配模式成功后替换之后的字符串
  • flags:(可选)全匹配还是局部匹配
#header::after {
  content: replace("Hello, Mars?", "Mars\?", "Earth!");
}

// 编译之后的结果为:
#header::after {
  content: "Hello, Earth!";
}
3.2 list函数系列
3.2.1 length函数

用于获取集合中的值的数目

参数:采用逗号/空格隔开的集合

返回:集合中值的个数

使用:

@list1: "a" "b" "c" "d";
@list2: "a","b";
div {
  width: length(@list1)px;
  height: length(@list2)px;
}

// 编译之后的结果为:
div {
  width: 4 px;
  height: 2 px;
}
3.2.2 extract函数

用于返回集合中指定位置上的值。索引从1开始

使用:

@list: 200 300 400 500;
div {
  width: extract(@list,2)px;
}
3.3 Math函数系列
3.3.1 ceil

向上取整

3.3.2 floor

向下取整

3.3.3 percentage

将小数转化为百分比的形式

@list: .2;
div {
  width: percentage(@list);
}

// 编译之后的结果为:
div {
  width: 20%;
}
3.3.4 round

四舍五入

参数:

  • number:浮点数
  • decimalPlaces: 可选参数,四舍五入取整的小数点位置,默认值为0
3.3.5 sqrt(number)

计算数字的平方根

3.3.6 abs(number)

求数字的绝对值

3.3.7 pow(@base,@exponet)

求@base得@exponet次方

3.3.8 mod(number1,number2)

number1对number2取余

3.4 Type函数系列

判断数据类型,也即数据值类型,虽然js是弱类型,但是数据值也有number,boolean之分得。

3.4.1 Isnumber

判断数据是否是数字

@list: .2;
@isnum: isnumber(@list);// true
3.4.2 Isstring

判断数据是否是字符串

@list: false;
@isstr:isstring(@list);// false
3.4.3 iscolor

判断数据是否是个颜色值

@list: rgba(0,0,0,.5);
@iscolor: iscolor(@list);// true
3.4.5 iskeyword

判断数据是否是一个关键字

@list: soild;
@iskeyword: iskeyword(@list);// true
3.4.6 isurl

判断数据是否是一个url地址,该地址需要放在url函数中,而不是单纯的一个字符串

@list: url("https://www.cd.com");
@list2: "https://www.cd.com";
@isurl1: isurl(@list);// true;
@isurl2: isurl(@list2);// false
3.4.7 ispixel

判断数据是否是带像素单位的数据。

@list: 200;
@list2: 200px;
@ispixel1: ispixel(@list);// false;
@ispixel2: ispixel(@list2);//true;
3.4.8 isem

判断数据是否是带em单位的数据

3.4.9 ispercentage

判断数据是否是带百分比单位的数据

3.4.10 isunit

判断数据是否是带指定单位的数据

@list: 200;
@list2: 200px;
@isunit1: isunit(@list,px) ;// false
@isunit2: isunit(@list2,px);//true
3.5 其他杂项函数
3.5.1 color函数

将代表颜色的字符串(内置颜色值:red等,以及十六进制值)转换为十六进制颜色值。rgb值还是转换为rgb值。

@color: red;
@colorborder: rgba(0,3,4,.5);
div {
  background: color(@color);
  border: 1px solid color(@colorborder);
}

// 解析之后的结果为:
div {
  background: #ff0000;
  border: 1px solid rgba(0, 3, 4, 0.5);
}
3.5.2 convert

数据兼容单位之间的转换。

兼容单位有:

长度: m cm mm in pt pc

时间: s ms

角度: rad deg grad turn

第一个参数是带单位的数值,第二个参数是要转换的单位。如果两个参数的单位是兼容的,则数字的单位被转换,如果两个参数的单位不兼容,则原样返回第一个参数。

兼容单位的相互转换

@time: 3000ms;
div {
  transition-duration: convert(@time,s);
}

// 编译之后的结果为
div {
  transition-duration: 3s;
}

不兼容单位的相互转换

@time: 3000ms;
div {
  transition-duration: convert(@time,deg);
}

// 编译之后的结果为:
div {
   transition-duration: 3000ms;
}
3.5.3 data-uri

将资源文件内嵌到样式文件中。

但是我感觉就主要是对字符串的地址进行URL转换,转换为url()函数的方式获取路径。

@time: '/images/dog.jpg';
div {
  background-image: data-uri(@time);
}

// 编译之后的结果为:
div {
  background-image: url('/images/dog.jpg');
}
3.5.4 default

边界函数,当自定义函数都不匹配的时候,该默认函数被匹配,否则匹配匹配成功的函数。

// 定义了三个自定义函数
.minx(1) {
  x: 2;
}

.minx(2) {
  x: 3;
}

.minx(@x) when(default()) {
  z:@x;
}

div {
    // 匹配成功
  .minx(1);
}

span {
    // 匹配成功
  .minx(2);
}

.my {
    // 匹配不成功 匹配默认函数
  .minx(3);
}
3.6 unit

移除或者改变属性值的单位

第一个参数是要做计算的数据,可以带单位或者不带单位,如果不带单位且第二个参数有值,则会加上,否则替换。

第二个参数是可选值,将要替换的单位。

div {
  width: unit(200px,%);
  height: unit(200,px);
}

// 编译之后的结果为:
div {
  width: 200%;
  height: 200px;
}
3.6 color函数系列
3.6.1 rgb(@red,@green,@blue)

将rgb颜色值转为十六进制颜色值

div {
  background-color: rgb(1,2,3);
}

//  编译之后的结果为:
div {
  background-color: #010203;
}
3.6.2 lightness(@color)

提取lightness亮度

div {
  background-color: lightness(#909090);
}

// 编译之后的结果为:
div {
  background-color: 56.47058824%;
}
3.6.3 red(@color)

提取red颜色的值

div {
  background-color: red(#909090);
}

// 编译之后的结果为:
div {
  background-color: 144;
}
3.6.4 green(@color)

提取green颜色的值

3.6.5 blue(@color)

提取blue颜色的值

3.6.6 alpha(@color)

提取透明度的值

3.6.7 lighten(@color,10%)

提高10%的@color亮度

3.6.8 darken(@color,10%)

降低10%的@color

3.6.9 fadein(@color,10%)

透明度增加10%

3.6.10 fadeout(@color,10%)

透明度减少10%

3.6.11 fade(@color,10%)

设置透明度为10%

3.7 函数运算

less中支持加减乘除运算

@width: 20px;
div {
  background-color: red(#909090);
  width: @width * 10;
}

// 编译之后的结果为:
div {
  background-color: 144;
  width: 200px;
}

4.导入

可以使用@import导入其他文件

LESS提供 @import ,允许样式表同时导入LESS和CSS样式表。

S.N. 导入选项及描述
1 reference 它使用一个LESS文件作为参考,不会输出它。
2 inline 它使您能够将CSS复制到输出而不进行处理。
3 less 它会将导入的文件视为常规LESS文件,尽管可能是文件扩展名。
4 css 它会将导入的文件视为常规CSS文件,尽管可能是文件扩展名。
5 once 它将只导入一次文件。
6 multiple 它会多次导入文件。
7 optional 即使找不到要导入的文件,它仍会继续编译。

允许在 @import 语句中使用多个关键字,但必须使用逗号分隔关键字。

@import (less, optional) "custom.css";

你可能感兴趣的:(#,css,LESS,CSS3)