开发环境
在生产环境下编译（产品还没开发完，正在开发中，这个是开发环境）
在开发环境下编译只需要导入less.js即可
引用Less步骤
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet/less" href="[引入写的less文件]">
<!-- 导入less文件 -->
<script src="js.less-2.5.3.min.js"></script>
</head>
<body></body>
</html>
在less文件中将 css文件 导入（ 需要将 css 代码编译放在浏览器中渲染 ）
import "[文件名]" ;
在 less文件中 将 css文件 导入（ less 公用的变量或者方法只需要调取使用，代码不需要编译，所以要用 reference 修饰一下）
import (reference) "[文件名]" ;
生产环境
在生产环境下编译（产品开发完成了，需要部署到服务器上）
项目上线，不能把less部署，这样用户每一次打开页面都需要重新的编译，非常耗性能，我们部署到服务器上的是编译后的 css
- 在当前电脑的全局环境下安装
less模块 - 安装命令：
npm install less -g - 检测是否安装成功：
lessc -v
基于命令把我们的 less编译成css，把指定目录中的less编译成css （并且实现了代码的压缩），把编译后的css存入到具体指定路径的文件夹中；上线前在HTMl中导入的css文件
lessc css/index.less css/index.min.css -x
基于
webpack和框架实现工程化开发的时候，我们都是在webpack配置文件中配置出less的编译（需要安装less/less-loader等模块），这样不管是开发环境下的预览，还是部署到生产环境下，都是基于webpack中的less模块编译。
Less的一些常用语法
用变量存储一个公共值，后期需要使用这个值，直接调取变量即可，以后如果值需要修改，只需要更改变量的值，那么所有用到这个变量的地方都跟着修改了
代码实例
/*
.conterPos => [函数名]
@w:100; @h:100 => [形参，:100 是不传参设置的默认值]
unit() => [引用形参]
*/
.conterPos(@w:100,@h:100){
position:absolute;
top:50%;
left:50%;
margin-top:unit(-(@h/2),px);
margin-left:unit(-(@w/2),px);
}
.box{
.centerPos(200,200);
}
代码实例
/*reference:只把内容导入过来使用，但是不会编译common中的内容*/
import (reference) "common";
/*==========*/
/*less创建变量*/
link-color:#555; /*创建变量*/
bg-src:"../img";
/*less中字符串拼接*/
"@{bg-src}"
/*使用实例：*/
.box{
coleor:@link-color;
background:url("@{bg-src}/news_1.png");
}
/*==========*/
/*less作用域和嵌套*/
H:200;
.pub{
@H:100;
.bg{ /* 等价于：.pub .bg */
a{
width:unit(@H,px); /*300*/
}
@H:300;
}
&>.bg{ /* 等价于：.pub >.bg */
}
&.bg{ /* 等价于：.pub.bg */
}
&:hover{/* 等价于：.pub:hover */
}
}
/*==========*/
/*less创建函数*/
.transition(@property:all,@duration:.5s,@timing-function:linear,@delay:0s){
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
.cc{
.transition();/*默认值*/
.transition(@duration:1s);
}
