less基础：
CSS是一门非程序语言，没有变量、函数、作用域等，此时使用rem单位就会出现图片等大量计算尺寸的问题，但是less可以轻松实现运算，它是CSS预处理语言，引入了变量、混入、函数等，常见的CSS预处理语言还有：Sass、Stylus等，Less中文网址：http://lesscss.cn
Less安装：
①安装nodejs：进网址：http://nodejs.cn/download，选择对应自己电脑系统的node下载安装，检查是否安装成功：cmd控制台键入 node -v ， 若出现有node版本信息则安装成功。
②基于node下的npm安装：cmd控制台键入 npm install -g less ，检查是否安装成功：cmd控制台键入：lessc -v ，若出现less版本信息，则安装成功。
Less编译：
less本质上是由一套自定义语法及一个解析器组成，根据语法定义自己的less文件，最终会编译成CSS文件供html使用。
Easy LESS插件：把less文件编译成css的VScode插件，在VScode安装此插件后，保存less文件后会自动生成对应的css文件，把此css文件引入html文件即可。
less.js插件：less文件不能直接在浏览器被解析，因此是不能直接将less文件通过link引入到html文件中的；但是可以通过引入js插件less.js同时声明link标签中type属性的值为text/less就可以被转化为在浏览器可识别的css，less被获取是通过ajax请求的，因此不能通过files的形式访问，如：
<head>
<link rel="stylesheet" type="text/less" href="lib/less/less.less">
<script src="lib/less/less.js"></script>
</head>
less语法：
less文件中可以直接 写css代码,开始less编码时建议声明字符编码辑。
less中的注释：less中有两种注释语法，如下：
@charset:'UTF-8';
/*注释内容,可以编译到css文件中*/
//注释内容，不能编译到css文件中
变量：没有固定的值，可以改变，css中的颜色值和数值经常使用，语法：@变量名:值 ，（变量名规范：必须以@为前缀、不包含特殊字符、不以数字开头、字母区分大小写），less中字符串拼接需要将变量名通过{}包裹，如：@color:pink; 、@number:10;、.{@className}
嵌套：在less中可以像html一样，如果标签是父子级关系，可以嵌套书写，编写后会生成对应的父子级形式的选择器，less语法中伪类伪元素前面要加 & 符号才表示当前元素的伪类，否则表示此元素的子代伪元素，如：
@bgcolor:rgb(199, 235, 250);
@font12:12px;
@className:box;
div {
background-color: @bgcolor;
a {
font-size:@font12;
// less语法中伪类前面要加 & 符号才表示当前元素的伪类，若不加则表示此元素的子代伪元素：
&:hover {
color:bisque;
}
}
}
.@{className}{
color:red;
};
//编译后的css代码：
//div {
// background-color: #c7ebfa;
//}
//div a {
// font-size: 12px;
//}
//div a:hover {//若less前面没有加 &，则解析成div a :hover
// color: bisque;
//}
// .box {
// color: red;
// }
混入：混入分类混入和函数混入，类混入是将若干个类在另一个{}中使用()调用，使被调用的类的属性代码在新的类中生成，如：
.floatLeft{float:left;}
.bgc{background-color:blue;}
// 将上面两个类的属性及值混入到新的类中：
.box{
.floatLeft();
.bgc();
}
//生成的对应css代码：
.floatLeft {
float: left;
}
.bgc {
background-color: blue;
}
.box {
float: left;
background-color: blue;
}
函数混入：由于类混入定义的类会编译到css代码造成代码冗余，这样不太好，可以使用函数混入，解决这个代码冗余的情况，函数语法：.函数名(){};，使用时是将类定义到函数中，在另一个类中使用时，直接调用函数即可，但是不会在css代码中生成类，函数里面可以传入参数，但是定义了参数后就必须传入参数，否则会报错，但是可以传入默认参数，就是在形参变量名后面加冒号，冒号后面的值即为默认值，如：
@fl:left;
@fr:right;
.floatLeft(@left:left){//定义了默认值为left
float: @left;
}
.bgc(){
background-color: blue;
}
.box {
.floatLeft(@fr);//当不传入参数时，会使用默认值left
.bgc();
}
// 生成的css代码：
.box {
float: right;
background-color: blue;
}
混入函数定义中{}里面可以继续定义类，便于将代码重用和方便管理，要想使用到函数里面具体的某个类时，直接通过函数名加类名的方式就可以调用到，如：
.bgc(){
.yello{
color:yello;
}
.width{
width:20px;
}
}
.box {
.bgc.width;
}
//使用.bgc函数中的.width编译后生成的css代码如下：切记调用时函数名后面不能加()
.box {
width: 20px;
}
映射：通过上面代码可以看出混入函数中可以定义类，less3.5开始可以定义映射，简单的说就是在函数中可以定义key和value键值对，使用时可以通过[]加键拿到具体的value,如：
.bgc(){
divcolor:blue;
key:value;
}
.box {
color:.bgc[divcolor];
font:.bgc[key];
}
//使用.bgc函数中定义的key和value编译后生成的css代码如下：
.box {
color: blue;
font: value;
}
作用域：less 中的作用域和css中的作用域相似，都是先从本作用域查找，找不到继续往父级查找，如：
@color: yellow;
div {
@font: 20px;
p {
color: @color;
font-size:@font;
}
}
//编译后的代码如下：
div p {
color: yellow;
font-size: 20px;
}
运算：less语法提供了加(+)减(-)乘(*)除(/或外面加小括号)等运算，任何的数字、颜色、变量都可以参与运算。运算符号左右两边必须要用空格隔开，如果两个变量中只有一个变量有单位或两个变量的单位相同时，则结果的单位就是其中的这个单位；当两个变量都有单位时，以前面变量的单位为结果的单位；
@fontsize:12px;
@width:200px;
div {
width: (24 / @fontsize);
height: @width / 2rem;
border: 12rem / @fontsize solid (#333222 - #111222);
}
//对应的css代码：
//div {
// width: 2px;
// height: 100px;
// border: 1rem solid #222000;
//}
calc() ：使用calc()后，将不再对数学表达式进行计算，但是在嵌套函数中是会计算变量和数学公式的值，如：
@add: 20px/2;
@num:calc(20px/2);
div{
width:calc(20% + (@add - 5px));
height:@num;
};
//对应生成的css代码如下：
div {
width: calc(20% + (10px - 5px));
height: calc(20px/2);
}
转义：将所有字符串作为属性或变量值，除interpolation外，语法是：~‘字符,串’，如：
@maxw: ~"(max-widht: 1200px)";//less3.5后可以省略~及引号，直接写成@maxw:(max-widht: 1200px)
div {
@media @maxw {
width:1200px;
}
}
//上面代码是生成一个条件为max-widht: 1200px的媒体查询，编译后的代码如下：
@media (max-widht: 1200px) {
div {
width: 1200px;
}
}
函数：less和其他语言一样内置了很多好用的函数，小编在这里不做过多的强调了，如需了解更多，可以阅读官方文档函数篇：https://less.bootcss.com/functions/,这里介绍高频使用的函数：
//1.length(array):获取array数组的长度，less中也是可以定义像其他语言类似的数组，其语法如：
@arr:320px,540px,750px,920px,1200px;//less中定义数组不使用[]包裹。
//获取arr数组的长度，并赋值给变量arrLength：
@arrLength:length(@arr);
//2.extract(arr,index);获取数组arr中第index个元素，如获取@rr中的第二个元素并赋值给@arrSecond：
@arrSecond:extract(@arr,2);//特别提醒，元素是从1开始计算的。
less中函数实现遍历功能：less语言中没有遍历，若要实现遍历的方法，可以通过函数自调用的方式来模拟遍历，但是函数自调用可能会陷入死循环，因此需要加入条件（此方法常用于rem + less + 媒体查询 布局中，因为rem + less布局时需要适应多款设备，此时就要定义多个html根font-size的值，为了更好的维护，采用函数模拟遍历的方式可自动生成多种font-size的值，如下案例：）
//.functionName(参数) when (条件){code},less中函数可以使用when加条件，当条件满足时会执行函数，否则不再执行函数，如：
.setFontSize(@index) when (@index <= @arrLength){
@media （min-widht:extract(@arr,@index)）{
html{
font-size:@baseSize / @psdWidth * extract(@arr,@index);
};
};
.setFontSize(@index + 1);//函数自己调用自己实现遍历效果，每次调用时参数+1来提满足判断条件
};
//调用：
.setFontSize(1);//调用时传入参数1，从1开始遍历
将一个less文件导入另一个less文件：
@import "common.less"
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
