学习笔记及其demo参考教程指路：
less是css的预处理器也称为超集，是基于JavaScript编写，能够通过程序语言预处理的方式提高css代码复用性，减少css代码的冗余程度。
less的安装与配置
"less.compile": {
"compress": false, // true => remove surplus whitespace
"sourceMap": false, // true => generate source maps (.css.map files)
"out": "${workspaceRoot}\\less-learning\\css\\" // false => DON'T output .css files (overridable per-file, see below)
}less命名空间和访问器
（待补充）
变量插值
一般来说，变量的赋值可表示为：@变量：值。
其中，左侧的变量是广义的，可以为普通的变量，也可以为选择器等属性。
对于普通的变量，例子如下：
// 定义属性fontSize
@fontSize: 15px;
.content {
h1 {
color: red;
font-size: @fontSize+10;
}上述例子还可以表示为：
// 定义属性fontSize
@var:@fontSize;
@fontSize: 15px;
.content {
h1 {
color: red;
font-size: @fontSize+10;
}对于第二种情况，比如选择器的情况，例子如下：
@Selector: h2,h3;
@{Selector} {
background-color: yellowgreen;
}在这个例子中，设置了选择器变量，设置为批量的标题标签的背景颜色。
以上两个例子充分展现了less的复用能力，第一个例子是定义了一个能够复用的属性，将该属性的值进行复用；第二个例子是定义了选择器的属性，将选择器的属性进行复用，能够适应多种元素公用批量属性的情况。
在普通变量中，URL类型、path类型的变量需要使用 "{}" 进行包裹，因此其赋值右侧不是具体的值。
此外，还找到了一个比较丰富的例子，如下：
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");
&:after {
display: block;
content: @@var;
}
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";less拓展
less拓展extend
形式为“:extend”，其本意为单继承其他样式的函数或对象。
教程中给出了例子，如下所示：
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
上述例子中，&用来替代自身。上述中的&就表示h2标签。这段less还等价为：
h2:extend(.style){};
.style{backgroud:green;}less的混入是相当灵活的，因为我们即可以传参决定样式属性的值，也可以通过匹配取出相应的样式，但是灵活的同时也带来了编译时更加繁琐，体积也更大，性能稍微消耗一点。
而less的继承它是不可以传参改变的，它就是写死的，所以这里可以放我们写的公共样式，我们继承的样式相当于拷贝了一份。因为样式是写好了固定了，所以编译起来快。
总结:less的混入 灵活性高 相对于继承性能消耗大一点，less的继承不可传参，继承固定的样式，编译起来快，性能高。
less拓展mixins
mixins初步使用
mixins也是样式拓展的方法，使用方法见下例，a为被复用的样式，myclass5包含复用样式a。注意的是，a包含括号的话，在编译时不会输出到css文件。
.a() {
background-color: aqua;
}
.myclass5 {
font-size: 15px;
.a
}既然带括号()后，不会被编译至css文本，那么被复用样式可以任意命名，且属于“私有属性”。如下所示，将上述代码进行修改，将a改为其他命名，仍然运行成功。
.abc() {
background-color: aqua;
}
.myclass5 {
font-size: 105px;
.abc
}带有判断条件（guard）的mixins：
.mixins() when (@color=blue) {
.mixin {
color: yellow;
}
}
.myclass6 {
.mixins .mixin();
}这里的(.mixins)也可以写为(#mixins)，这里是“#”不是id的指代，而是命名空间的确定，在本例中对实际效果影响较少。此外，guard判断条件中包含@color属性，该属性需要提前声明，用在这里表示的含义是：如果color属性为blue，才会引入mixin属性（变为黄色），否则还是原来的样式（黑色）。
mixins构造函数
mixins构造函数表示mixins可以包含多个形参，且形参可以有多个默认值。例子如下：
.mixinsattr(@var1, @var2: 15px) {
background-color: @var1;
font-size: @var2;
}
.myclass7 {
.mixinsattr(#333)
}构造函数的其他特性：
@arguments写在body体内，表示选择全部参数。
“...”写在形参处，表示形参数量可选。
模式匹配器
模式匹配器是构建多个被复用样式，这几个样式是一样的，但是会有不同的参数值，根据参数取值，可以确定调用的是哪个样式，即模式匹配。例子如下：
.mixin(light; @color) {
color: lighten(@color, 15%);
}
.mixin(dark; @color) {
color: darken(@color, 15%);
}
@color-new: dark;
.line {
.mixin(@color-new; #FF0000);
}嵌套Mixin
嵌套mixin就是字面意思。在调用时，需要先后选择两次mixin，如果只运行外层的话，无法设置样式。即，需要调用到直接样式的上一层，同样的例子还可以从mixin规则集的传递中见到。
例子如下：
// 练习嵌套mixin
.outMixin(@var) {
.intMixin() {
font-size: @var;
}
}
.myclass9 {
.outMixin(50pt);
.intMixin;
}Mixin的返回值
在mixin中，只要定义一个变量即可；在其他地方调用mixin函数后，拿到该变量即可返回。
//练习mixin返回值
.font(@x1, @x2) {
//一定要打大括号
@fontsize: ((@x1+@x2)/2);
}
.myclass10 {
.font(10px, 50px);
font-size: @fontsize;
}Mixin规则集的传递
将mixin规则集整体的样式函数赋值给所需要的地方去。该功能需要定义一个变量承载规则集。
不理解其与extent 的区别。
《补充示例代码》
@import导入
@import导入是指将其他less/css文件导入至less文件中，两者代码可以合并，从而进一步增加其复用性。
格式：@import (reference、inline、less、css、once、multiple、optional关键字) “文件名称”。注意，import与括号之间需要有空格。
关键字reference
reference关键字的意思是，导入外部less文件后，编译过程中不直接输出到css文件。但如果是采用extend或mixin的显性形式，则输出到css中，样式生效。
例子如下：
内部style.less文件：
@import (reference)"D:\0727\study\code\less-learning\less\style2-2.less";
.mytitle1 {
color: red;
.style2;
}外部style2-2.less文件
.style2 {
font-size: 48px;
}编译成功后的css文件如下：
.mytitle1 {
color: red;
font-size: 48px;
}关键字inline
inline关键字的意思是，导入外部文件后，会将其编译至css文件中，但样式并不会生效。
关键字less、css
这两个关键字会将导入的文件转化为less、css后缀的格式导入。
Less Guard
Less Guard包含在mixin的声明当中，作为判断该mixin是否使用的条件。Guard条件分为几种类型：比较运算、逻辑运算、类型检查。分别介绍如下：
比较运算：
格式如下所示，需要在mixin定义时确定guard条件。
.mixin(@a)when(@a<10px) {
color: green;
}
.mixin(@a)when(@a>=10px) {
color: orange;
}
.mixin(@a){
font-size: @a;
}
.mytitle2 {
.mixin(5px);
}上述例子的结果为 color: green; font-size: 5px; ，表明匹配了第一、三条mixin。
类型检查函数
基础的类型检查函数包括：iscolor、isnumber、isstring、iskeyword、isurl。
还包括单位检查函数：ispixel（像素）、ispercentage、isem（当前对象内文本字体的尺寸）、isunit（单个单位）。
Less循环
Less循环是结合递归函数以及guard条件进行判断，例子如下：
.loop(@n, @i: 1) when(@i =< (@n+1)) {
//注意i还有{}包裹
.class@{i} {
width: (@i/@n*100%);
}
.loop(@n, @i+1);
}
.loop(4);得到的编译结果如下：
.class1 {
width: 25%;
}
.class2 {
width: 50%;
}
.class3 {
width: 75%;
}
.class4 {
width: 100%;
}LESS合并
merge操作
merge有两种形式，逗号合并、空格合并，均为追加至最后。两种形式的合并都必须要属性名称完全一致，逗号合并是在需要合并的两个对象之间增加逗号“,”，空格合并是增加空格“ ”。
// 练习属性值追加合并
.add() {
box-shadow+: 5px 5px 5px grey;
}
.class {
.add;
// 逗号合并
box-shadow+: 5px 5px 5px grey;
// 空格合并
box-shadow+_: 5px 5px 5px grey;
}结果如下：
.class {
box-shadow: 5px 5px 5px grey, 5px 5px 5px grey 5px 5px 5px grey;
}less组合爆炸
less组合爆炸指的是采用“&”符号，实现同级的两个或多个标签的组合。形象描述如下所示：
HTML页面：多个p、div平行标签，相邻标签的组合分为p+p、p+div、div+p、p+i、i+div、div+div五种。
<p>这是第一段</p>
<p>这是第二段，紧跟第一段（即p+p）。这将被突出显示</p>
<div>此div与第二段（即p+div）相邻。这将被突出显示。</div>
<p>这是与div（即p+div）相邻的第三段。这将被突出显示</p>
<i> 这是斜体。由于CSS中没有（p+i），因此不会突出显示</i>
<div>这是第二个div.</div>
<div>这是与第二个div相邻的div（即div+div）。这将突出显示</div>
less编码：使用&+&，表示p+p、p+div、div+p、div+div这四种组合情况。
p,
div {
color: red;
font-family: Lucida Console;
&+& {
color: green;
background-color: yellow;
font-family: "Comic Sans MS";
}
}编译后的css结果表明，与预期一致。
p,
div {
color: red;
font-family: Lucida Console;
}
p + p,
p + div,
div + p,
div + div {
color: green;
background-color: yellow;
font-family: "Comic Sans MS";
}
上述例子不仅学习了less中采用&进行元素组合的用法，同时还了解了css中“+”的用法。
LESS的一些函数
less中内置的函数可以直接使用。仅罗列常用的字符串函数、 列表函数、数学函数，其他函数是使用可以直接参考以下手册：
Less 安装_w3cschool
https://www.w3cschool.cn/less/less-qild1yv2.html
字符串函数
replace、%format（格式化字符串）、e（去掉字符串的引号）、escape。
列表函数
length、extract。
extract：返回集合里某个位置的值，用法：extract(@arr,2)表示返回arr中索引为2的值。
数学函数
ceil、round、max、min、mod、pow等。
其他资料链接
less的用法与函数_less 函数_ey..的博客-CSDN博客https://blog.csdn.net/weixin_47863547/article/details/115304925
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
