前端开发学习路径之阶段八：Less即学即用

1、Less简介

       LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

       CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

2、Less语言特性

2.1 Less 嵌套规则

       它是一组CSS属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

2.2 Less操作

       LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。

2.3 Less 注释

       注释的适当使用可以保证代码的可读性，Less 支持两种类型的注释：多行注释和单行注释。

注释使代码清晰，并允许用户轻松地理解。 您可以在代码中使用块样式和行内注释，但是当编译LESS代码时，单行注释不会显示在CSS文件中。

2.4 Less 变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

LESS中声明变量的格式为“@变量名：变量值”。

下表详细说明了使用LESS 变量。

S.N.	变量用法及描述
1	概述 通常看到多次重复相同的值，并且可以通过使用变量来避免。
2	变量插值  这些变量也可以用于其他位置，例如选择器名称，属性名称， URL 和@import 语句。
3	变量名称  我们可以定义变量名称由一个值组成的变量。
4	延迟加载  在延迟加载中，即使它们尚未声明，也可以使用变量。
5	默认变量  默认变量只有在尚未设置时才能设置变量。此功能不是必需的，因为变量可以很容易地通过定义它们后覆盖。

2.5 Less 混合

        混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

下表详细说明了LESS mixin的使用。

S.N.	混合使用及描述
1	不输出mixin  混合可以通过简单地将括号放在输出中消失。
2	Mixins中的选择器  mixin不仅可以包含属性，还可以包含选择器。
3	命名空间  命名空间用于在通用名称下对mixin进行分组。
4	保护的命名空间  当保护应用于命名空间时，它定义的mixins只有在保护条件返回真时才使用。
5	！important关键字  ！important 关键字用于覆盖特定属性。

具         有多个参数的混合

参数可以是分号或逗号分隔。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。

使用逗号作为mixin分隔符使得无法将逗号分隔列表创建为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔，并且所有逗号都属于css列表：

• 两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)，
• 三个参数，每个包含一个数字：.name(1, 2, 3)，
• 使用dummy分号创建mixin调用，其中一个参数包含逗号分隔的css list : .name(1, 2, 3;),
• 逗号分隔的默认值：.name(@param1: red, blue;)。

定义具有相同名称和参数数量的多个mixin是合法的。Less将使用所有可应用的属性。如果您使用带有一个参数的mixin .mixin(green);，那么将使用具有一个强制参数的所有mixin的属性。

2.6 Less 父选择器

引用父选择器 &

的&操作者表示的父选择嵌套规则并且最常用的施加改性类或伪类到现有的选择器时：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

结果是：

a {
  color: blue;
}

a:hover {
  color: green;
}

请注意，如果没有&，上面的示例将导致a :hover规则（后代选择器匹配<a>标记内的悬停元素），这不是我们通常希望嵌套的:hover。“父选择器”运算符具有多种用途。基本上，只要您需要嵌套规则的选择器以默认的其他方式组合。

3、Less函数

3.1 杂项函数

杂项函数包括不同类型的功能组。

下表列出了所有类型的misc函数:

S.N.	函数及描述
1	color 它是一个代表颜色的字符串。
2	image - size  它用于从文件检查图像的维度。
3	image - width  它检查文件中图像的宽度。
4	image-height  它检查图像从文件的高度。
5	convert 数字从一个单位转换为另一个单位。
6	data - uri  数据uri是统一资源标识符(URI)模式，其在网页中嵌入资源。
7	default     默认函数仅在保护条件内可用且与任何其他混合程序不匹配时才返回true。
8	unit 默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true
9	get - unit  get-unit函数返回其中存在参数的单位，其数字和单位。
10	svg - gradient svg-gradient是一种颜色到另一种颜色的转换。 它可以向同一元素添加许多颜色。

3.2 字符串函数

Less支持以下列出的一些字符串函数：

• 逃逸

• e

• %格式

• 更换

下表描述了上述字符串函数及其说明。

S.N.	类型及描述	例子
1	Escape 它通过对特殊字符使用URL编码来对字符串或信息进行编码。 您无法编码一些字符，例如，， / ，？ ， @ ，＆amp; ， + ，〜，！ ， $ ，\'和您可以编码的一些字符，例如 \\ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。	escape("Hello!! welcome to Tutorialspoint!") 它输出转义字符串为: Hello%21%21%20welcome%20to%20Tutorialspoint%21
2	e  它是一个字符串函数，它使用string作为参数，并返回不带引号的信息。 它是一个CSS转义，它使用〜“一些内容"转义的值和数字作为参数。	filter: e("Hello!! welcome to Tutorialspoint!"); 它输出转义字符串为: filter: Hello!! welcome to Tutorialspoint!;
3	% format 此函数格式化一个字符串。 它可以写成以下格式:     %(string，arguments ...)	format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); 它输出格式化的字符串为: format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4	replace 它用于替换字符串中的文本。 它使用一些参数： string :它搜索字符串并替换。 pattern :它搜索正则表达式模式。 replacement :它替换与模式匹配的字符串。 flags :这些是可选的正则表达式标志。	replace("Welcome, val?", "val\?", "to Tutorialspoint!"); 它将字符串替换为: "Welcome, to Tutorialspoint!"

3.3 列表函数

LESS由列表函数组成，用于指定列表的长度和列表中的值的位置。

下表列出了LESS中使用的列表函数:

S.N.	函数及描述
1	Length 它将以逗号或空格分隔的值列表作为参数。
2	Extract 它将返回列表中指定位置的值。

3.4 数学函数

数学函数包括用于执行数字运算的方法，例如舍入，平方根，功率值，模数，百分比等。

下表显示了LESS中使用的数学函数:

S.N.	函数及描述	例子
1	ceil  它将数字向上舍入为下一个最大整数。	ceil(0.7) 它将数字舍入为:         1
2	floor 它将数字向下取整为下一个最小整数。	floor(3.3) 它将数字舍入为:        3
3	percentage 它将浮点数转换为百分比字符串。	percentage(0.2) 它将数字转换为百分比字符串为:        20%
4	round 它舍入浮点数。	round(3.77) 它将数字转换为舍入值:        4
5	sqrt  它返回一个数字的平方根。	sqrt(25) 它将数字的平方根定义为:         5
6	abs 它提供了数字的绝对值。	abs(30ft) 它显示绝对值为:        30ft
7	sin 它返回数字上的弧度。	sin(2)  它计算正弦值为:          0.90929742682
8	asin  它指定返回-pi / 2和pi / 2之间的值的数字的反正弦(反正弦)。	asin(1) it calculates the asin value as:   1.5707963267948966
9	cos  它返回指定值的余弦值，并在没有单位的数字上确定弧度。	cos(2) 它计算cos值为:          -0.4161468365471424
10	acos  它指定返回0和pi之间的值的数字的反余弦(反余弦)。	acos(1) 它计算acos值为:        0
11	tan  它指定数字的正切。	tan(60)  它计算tan值为:          0.320040389379563
12	atan  它指定指定数字的反正切(反正切)。	atan(1) 它显示atan值为:         0.7853981633974483
13	pi  它返回pi值。	pi()  它将pi值确定为:          3.141592653589793
14	pow  它指定第一个参数的值增加到第二个参数的权力。	pow(3,3) 它将功率值指定为:        27
15	mod  它返回相对于第二个参数的第一个参数的模数。 它还处理负点和浮点数。	mod(7,3) 它返回模量值为:        1
16	min 它指定一个或多个参数的最小值。	min(70,30,45,20) 它返回最小值为:        20
17	max 它指定一个或多个参数的最大值。	max(70,30,45,20) 它返回最大值为:        70

3.5 类型函数

Less 类型函数一共有十种，你可以通过文中的表格了解这些类型函数的使用。

下表显示了LESS中使用的类型函数。

S.N.	类型函数及描述	例子
1	isnumber  它使用一个值作为参数，并返回 true ，如果它是一个数字或 false	isnumber(1234); // trueisnumber(24px); // trueisnumber(7.8%); // trueisnumber(#fff); // falseisnumber(red); // falseisnumber(“variable"); // falseisnumber(keyword); // falseisnumber(url(...)); // false
2	isstring   它使用一个值作为参数，并返回 true ，如果它是一个字符串或 false	isstring("variable"); // true isstring(1234); // false isstring(24px); // false isstring(7.8%); // false isstring(#fff); // false isstring(red); // false isstring(keyword); // false isstring(url(...)); // false
3	iscolor  它使用一个值作为参数，并返回 true (如果值是颜色)或 false (如果不是)。	iscolor(#fff);        // true iscolor(red);         // true iscolor(1234);        // false iscolor(24px);        // false iscolor(7.8%);        // false iscolor("variable");  // false iscolor(keyword);     // false iscolor(url(...));    // false
4	iskeyword   它使用一个值作为参数，并返回 true (如果值是关键字)或 false (如果不是)。	iskeyword(keyword);   // true iskeyword(1234);      // false iskeyword(24px);      // false iskeyword(7.8%);      // false iskeyword(#fff);      // false iskeyword(red) ;      // false iskeyword("variable");// false iskeyword(url(...));  // false
5	isurl  它使用一个值作为参数，并返回 true (如果值为url)或 false (如果值不为)。	isurl(url(...));      // true isurl(keyword);       // false isurl(1234);          // false isurl(24px);          // false isurl(7.8%);          // false isurl(#fff);          // false isurl(red) ;          // false isurl("variable");    // false
6	ispixel   如果值是以像素为单位的数字，或者 false ，则以值为参数返回 true 。	ispixel(24px);          // true ispixel(1234);          // false ispixel(7.8%);          // false ispixel(keyword);       // false ispixel(#fff);          // false ispixel(red) ;          // false ispixel("variable");    // false ispixel(url(...));      // false
7	isem  它采用一个值作为参数，并返回 true ，如果值是em值或 false (如果值不是)。	isem(0.5em);            // true isem(1234);             // false isem(24px);             // false isem(keyword);          // false isem(#fff);             // false isem(red) ;             // false isem("variable");       // false isem(url(...));         // false
8	ispercentage   它采用一个值作为参数，如果值不是百分比，则返回 true ，如果值为百分比，或返回 false 。	ispercentage(7.5%);       // true ispercentage(url(...));   // false ispercentage(keyword);    // false ispercentage(1234);       // false ispercentage(24px);       // false ispercentage(#fff);       // false ispercentage(red) ;       // false ispercentage("variable"); // false
9	isunit  如果值是指定单位中作为参数提供的数字，则返回true ，如果值不是指定单位中的数字，则返回false 。	isunit(10px, px);       // true isunit(5rem, rem);      // true isunit(7.8%, '%');      // true isunit(2.2%, px);       // false isunit(24px, rem);      // false isunit(48px, "%");      // false isunit(1234, em);       // false isunit(#fff, pt);       // false isunit("mm", mm);       // false
10	isruleset   它将一个值作为参数，并返回 true ，如果值为规则集或 false	@rules: {     color: green; } isruleset(@rules);      // true isruleset(1234);        // false isruleset(24px);        // false isruleset(7.8%);        // false isruleset(#fff);        // false isruleset(blue);        // false isruleset("variable");  // false isruleset(keyword);     // false isruleset(url(...));    // false

3.6 颜色定义函数

LESS中的颜色定义函数使定义和操作颜色变得超级简单，使用颜色函数可以帮助你控制颜色、更好地配色。

LESS提供了许多有用的颜色函数，以不同的方式改变和操作颜色。 LESS支持一些颜色定义功能，如下表所示:

S.N.	函数及描述	例子
1	rgb  它创建从红色，绿色和蓝色值的颜色。 它有以下参数： 红色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 绿色:它包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 蓝色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。	rgb(220,20,60) 它使用rgb值将颜色转换为:        #dc143c
2	rgba  It determines color from red, green, blue and alpha values. It has following parameters: 红色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 绿色:它包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 蓝色:包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。 alpha :它包含0到1之间的数字或0到100%之间的百分比。	rgba(220,20,60,0.5) 它使用rgba值将颜色对象转换为:         rgba(220,20,60,0.5)
3	argb  It defines hex representation of color in #AARRGGBB format. It uses below parameter: color :它指定颜色对象。	argb(rgba(176,23,31,0.5)) 它返回argb颜色为:        #80b0171f
4	hsl  It generates the color from hue, saturation and lightness values. It has following parameters: hue :它包含介于0 - 360之间的整数，表示度数。 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 亮度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。	hsl(120,100%，50%) 它使用HSL值返回颜色对象:        #00ff00
5	hsla  It generates the color from hue, saturation, lightness and alpha values. It has following parameters: hue :它包含介于0 - 360之间的整数，表示度数。 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 亮度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 alpha :它包含0到1之间的数字或0到100%之间的百分比。	hsla(0,100%，50%，0.5) 它使用HSLA值将颜色对象指定为:         rgba(255，0，0，0.5);
6	hsv  It produces the color from hue, saturation and value values. It contains following parameters: hue :它包含介于0 - 360之间的整数，表示度数。 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 value :它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。	hsv(80,90%，70%) 它将具有hsv值的颜色对象转换为:        #7db312
7	hsvaIt produces the color from hue, saturation, value and alpha values. It uses following parameters: hue :它包含介于0 - 360之间的整数，表示度数。 饱和度:它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 value :它包含介于0 - 1之间的数字或介于0 - 100%之间的百分比。 alpha :它包含0到1之间的数字或0到100%之间的百分比。	hsva(80,90%，70%，0.6) 它指定具有hsva值的颜色对象为:        rgba(125,179,18,0.6)