less学习

less使用需要下载文件包

使用 less 方案一：

引包：在页面中直接引入less.js，可去官网下载放到自己的依赖包文件中，或者利用CDN在线引入

<script src="/libs/less.js/2.7.2/less.min.js"></script>

引入自己写好的less文件：link 标签一定要在 Less.js 之前引入，并且 link 标签的rel 属性要设置为stylesheet/less

<link rel="stylesheet/less" href="/less/style.less">
<script src="/libs/less.js/2.7.2/less.min.js"></script>

npm 安装或者 引入less.js
使用方法
1.可以声明变量后引用，也可以声明属性名或者选择器

@变量名      
@colors:#81F7F3;
		body {
   
			text-align: center;
		}
		.webd {
   
			background-color: @colors;
			height: 30vh;
			border: 1px solid saddlebrown;
			width: 20vw;
		 	.wc {
   
				margin: 0 auto;
				height: 0.375rem;
				width: 0.375rem;
				background: #000;
			}
		}
		@mag:margin;
		@selct:#id

.class:{
   
@{
   mag}:0
}

2.变量也有作用域和js一样，变量延迟加载。

@vas:1
.sdc{
   
@vas2
.thr{
   
@vas:3
height:@vas
}
height:@vas
}

3.嵌套规则 & 表示父级类

.wc {
   
				margin: 0 auto;
				height: 0.375rem;
				width: 0.375rem;
				background: #000;
				&:hover{
   
					background-color:#A9F5BC ;
				}
			}

4.混合 使用 ：定义类型.ppc混合

body {
   
			.ppc;