Less基本使用

前言

因为css是标记语言，无法定义变量、进行计算等，会有很多冗余代码，而less、scss等正是改变了这一缺点。

一、Less基本介绍

less是一门css的扩展语言，是css的预处理语言，他可以编写样式的同时使用变量、进行计算，减少冗余代码，提高开发效率

二、安装、编译

下载 npm install less -g
查看less版本 lessc -v
此时电脑中安装好less，可以使用less编写样式了。
编写完成后需要编译后才可以供浏览器使用，
vscode中有插件easy-less，下载安装并重启vscode，此时，编写less代码，保存后会自动生成less文件同名的css文件，将此css文件引入即可。

三、Less定义变量

定义变量基本格式为
@变量名：变量值
使用的时候可以直接当成变量去使用
如：
@fontSize:14px; div{ font-size:@fontSize; }

四、Less嵌套

使用less做嵌套很简单，父子关系的元素样式直接嵌套，伪类、伪元素、并集交集选择器等使用&拼接
如：

.dv{
      .left{
           	font-size:@fontSize;
			        a{
			            // left中的a样式
			             &:hover{
			            	 //left中的a  鼠标悬停时候的样式
			             }
					 }
            }
     .right{
        		....
		  }
   }

五、Less运算

less中可以进行运算 直接使用数学运算符即可

  div{
   		height:10px + 5;
}

如果进行运算的两个值只有一个有单位，则以此为准，如果都有单位，则以前者单位为准

Less混入

less中使用 @import ' '引入别的less文件 编译后的css文件即为两文件的结合
如：

common.less:
				@bgColor:pink;
				body{
					background-color:@bgColor;
				}

index.less:
			@import './common.less'
			......

index.css:
		body:{
			background-color:pink;
		}
		..........