LESS基础

该篇原文我保存在有道云，整理了后发在这里
原文有道云链接
以后都用less写，上线的时候转为css
面试时：定义+怎么用+影响
答案：混合集名字加个()来定义，需要传参的时候就传参，用的时候调用就行了，减少了代码的重复量。

一、LESS的使用

LESS的使用
简化的代码:(实际开发不用这种，因为加载很久)

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

开发时候用这个(推荐使用)

<link rel="stylesheet" type="text/css" href="index.css"/>

二、LESS的介绍

	Less是一个较为流行的css预处理语言。支持变量、混合、函数、计算、循环等特点。由于Less是预处理语言，所以不能直接运行，需要先进行编译。

凡是能用css编写的效果，都可以用Less编写。Less中支持所有的css的语法，向下兼容。
常见预处理语言：LESS SASS stylus

三、LESS语言的编译方式

LESS语言的编译方式
vs code 中easy less安装
Hbuilder安装less步骤
1.在HbuilderX里面工具->插件安装下载less插件

2.进入搜索less，然后下载

3.
4.如果在Hbuilder里面安装失败，是管理员权限问题；解决方案：法一：在管理员模式下安装（前提时安装了Node.js），然后根据HbuilderX安装插件失败解决方案去安装。法二：下载考拉也可以编译less(没有Node.js的时候用这种)
5.安装完了打开插件配置，将onDidSaveExecution的值设置为true

6.关闭hbuilderX，然后重新打开
7.新建less文件，右键less，编译less为css

8.关闭HbuilderX,重新打开
9.自己编写html去测试

四、Less中变量的使用(Variables)

• 使用@符号声明一个变量
  -口诀：1.css任何地方都可以用变量， 2.除了做属性值不用大括号，其他的用到变量都要大括号

1、变量作为css的属性值使用

@width:1200px;
@height:50px;
.box1{
   
	width:@width;
	height:@height;
}

编译后

.box1 {
   
  width: 1200px;
  height: 50px;
}

2、变量作为类名使用（需要将变量名加上大括号）

@selector:box2;
.@{
   selector}{
   
	width:@width;
	height:@height;
}

.box2 {
   
  width: 1200px;
  height: 100px;
}

3、变量作为路径使用（需要将变量名加上大括号）

@imgs:'../ES6/大转盘抽奖/img';

.box3{
   
	width:@width;
	height:@height;
	background:url("@{imgs}/bg_lottery.png")
}

.box3 {
   
  width: 1200px;
  height: 100px;
  background: url("../ES6/大转盘抽奖/img/bg_lottery.png");
}

4、变量作为属性使用（需要将变量名加上大括号）

@bg:background;
.box4{
   
	width:@width;
	height:@height;
	@{
   bg}:green;
}

.box4 {
   <