Less的常用编译语法

开发环境

在生产环境下编译（产品还没开发完，正在开发中，这个是开发环境）
在开发环境下编译只需要导入 less.js 即可

引用Less步骤

---

在less文件中将 css文件 导入（ 需要将 css 代码编译放在浏览器中渲染 ）

import "[文件名]" ;

在 less文件中 将 css文件 导入（ less 公用的变量或者方法只需要调取使用，代码不需要编译，所以要用 reference 修饰一下）

import (reference) "[文件名]" ;

---

生产环境

在生产环境下编译（产品开发完成了，需要部署到服务器上）

项目上线，不能把less部署，这样用户每一次打开页面都需要重新的编译，非常耗性能，我们部署到服务器上的是编译后的 css

1. 在当前电脑的全局环境下安装less模块
2. 安装命令：npm install less -g
3. 检测是否安装成功：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);
}

---