本文共 2886 字，大约阅读时间需要 9 分钟。

less基础：

CSS是一门非程序语言，没有变量、函数、作用域等，此时使用rem单位就会出现图片等大量计算尺寸的问题，但是less可以轻松实现运算，它是CSS预处理语言，引入了变量、混入、函数等，常见的CSS预处理语言还有：Sass、Stylus等，Less中文网址：http://lesscss.cn

Less安装：
①安装nodejs：进网址：http://nodejs.cn/download，选择对应自己电脑系统的node下载安装，检查是否安装成功：cmd控制台键入 node -v ， 若出现有node版本信息则安装成功。

②基于node下的npm安装：cmd控制台键入 npm install -g less ，检查是否安装成功：cmd控制台键入：lessc -v ，若出现less版本信息，则安装成功。

Less编译：
less本质上是由一套自定义语法及一个解析器组成，根据语法定义自己的less文件，最终会编译成CSS文件供html使用。

Easy LESS插件：把less文件编译成css的VScode插件，在VScode安装此插件后，保存less文件后会自动生成对应的css文件，把此css文件引入html文件即可。

less语法：

less文件中可以直接 写css代码,开始less编码时建议声明字符编码辑。

less中的注释：less中有两种注释语法，如下：

	 @charset:'UTF-8';    /*注释内容*/    //注释内容

变量：没有固定的值，可以改变，css中的颜色值和数值经常使用，语法：@变量名:值 ，（变量名规范：必须以@为前缀、不包含特殊字符、不以数字开头、字母区分大小写），less中字符串拼接需要将变量名通过{}包裹，如：@color:pink; 、@number:10;、.{@className}

嵌套：在less中可以像html一样，如果标签是父子级关系，可以嵌套书写，编写后会生成对应的父子级形式的选择器，less语法中伪类伪元素前面要加 & 符号才表示当前元素的伪类，否则表示此元素的子代伪元素，如：

	@bgcolor:rgb(199, 235, 250);    @font12:12px;    @className:box;    div {          background-color: @bgcolor;        a {            font-size:@font12;        //  less语法中伪类前面要加 & 符号才表示当前元素的伪类，若不加则表示此元素的子代伪元素：         &:hover {                color:bisque;         }         }    }    .@{   className}{           color:red;    };        //编译后的css代码：    //div {       //  background-color: #c7ebfa;    //}    //div a {       //  font-size: 12px;    //}    //div a:hover {   //若less前面没有加 &，则解析成div a :hover    //  color: bisque;    //}    // .box {       //   color: red;    // }

混入：混入分类混入和函数混入，类混入是将若干个类在另一个{}中使用()调用，使被调用的类的属性代码在新的类中生成，如：

	.floatLeft{   float:left;}    .bgc{   background-color:blue;}    // 将上面两个类的属性及值混入到新的类中：    .box{           .floatLeft();        .bgc();    }        //生成的对应css代码：    .floatLeft {         float: left;    }    .bgc {         background-color: blue;    }    .box {         float: left;      background-color: blue;    }

函数混入：由于类混入定义的类会编译到css代码造成代码冗余，这样不太好，可以使用函数混入可以解决这个代码冗余的情况，函数语法：.函数名(){};，使用时是将类定义到函数中，在另一个类中使用时，直接调用函数即可，但是不会在css代码中生成类，函数里面可以传入参数，但是定义了参数后就必须传入参数，否则会报错，但是可以传入默认参数，就是在形参变量名后面加冒号，冒号后面的值即为默认值，如：

	@fl:left;    @fr:right;    .floatLeft(@left:left){   //定义了默认值为left        float: @left;    }    .bgc(){           background-color: blue;    }    .box {           .floatLeft(@fr);//当不传入参数时，会使用默认值left        .bgc();    }        // 生成的css代码：    .box {           float: right;        background-color: blue;    }

运算：less语法提供了加(+)减(-)乘(*)除(./或外面加小括号)等运算，任何的数字、颜色、变量都可以参与运算。运算符号左右两边必须要用空格隔开，如果两个变量中只有一个变量有单位或两个变量的单位相同时，则结果的单位就是其中的这个单位；当两个变量都有单位时，以前面变量的单位为结果的单位；

	@fontsize:12px;    @width:200px;    div {           width: (24 / @fontsize);        height: @width ./ 2rem;        border: 12rem ./ @fontsize solid (#333222 - #111222);    }        //对应的css代码：    //div {       //  width: 2px;    //  height: 100px;    //  border: 1rem solid #222000;    //}

将一个less文件导入另一个less文件：

	@import "common.less"

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海