江在川上曰：less样式预编译

less样式预编译

1.css原生变量定义

1. 使用“–”进行变量定义
2. 使用var()进行变量的引用

--bgColor:red;
background:var(--bgColor);

2.css原生计算属性

1. 使用calc进行计算属性

   width:calc(50% - 200px)
   

2. 使用calc进行变量计算

   bgWidth:50%;
   width:calc(var(--bgWidth) - 200px)
   

3. 细节介绍:calc中的运算符左右两侧必须加 空格

   width:calc(59% - 200px)
   

3.css原生变量的作用域

1. 当前css页面的根变量

   :root{
   	bgColor:red;
   }
   .box1{
   	background:var(--bgColor);
   }
   .box2{
   	background:var(--bgColor);
   }
   

4.less预处理器

浏览器不识别less文件，less只是方便我们开发css和增强语法逻辑的

1. 在vscode中安装easy less插件，用于将less转化成css文件

5.less变量的定义

1. 使用@进行变量定义

   @bgColor:red;
   

2. 使用"."进行函数声明 mixin

   //声明函数 关键字
   .setColor(@c){
   	background-color:@c;
   }
   
   div{
   	//调用函数
   	.setColor(red)
   }
   

3. 使用嵌套

   div{
   	p{
   		a{
   			color:red;
   		}
   	}
   }
   

   生成的就是：

   div p a{
   	color:red;
   }
   

4. 使用循环loop

   //定义递归循环
   .loop(@index) when (@index > 0){
   	.loop(@index - 1);
   	width:@index * 1px;
   }
   //使用
   div{
   	.loop(2)
   }
   

   生成的css文件

   div{
   	width:1px;
   	width:2px;	
   }
   

   例子：

   //定义递归循环
   .loop(@index) when (@index > 0){
   	.loop(@index - 1);
   	.d@{index}{
   		width:@index * 1px
   	}
   }
   //使用
   div {
   	.loop(2)
   }
   

   生成：

   div .d1{
   	width:1px;
   }
   div .d2{
   	width:2px;
   }